Html5 audio标签详解

audio标签的语法结构：

<audio src="音频地址">您的浏览器不支持audio标签</audio>

其中audio中间的文字可以去掉,加上这些文字是为了让一些不支持audio标签的浏览器进行识别.

audio标签的基本属性：
• src（链接地址）；
• loop（设置是否循环播放）；
• autoplay（自动播放）；
• controls （提供给用户一个可以控制音频的控件）；
• preload（可以选择设置“none”,“metadata”,“auto”）

各浏览器对于audio标签和音频格式的兼容性：

以上这些意味着除了ogg格式,不管采用哪种格式,都会有至少2/5的浏览器不能正常播放该音频文件.
当然我们可以使用多音频格式来兼容不同的浏览器

<audio controls="controls">
  <source type="audio/ogg" src="sound.ogg">
  <source type="audio/mpeg" src="sound.mp3">
  Your browser does not support the audio tag.
</audio>

音频格式知识普及：

Ogg：全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式,类似于MP3等的音乐格式. Ogg是完全免费、开放和没有专利限制的. OggVorbis文件的扩展名是.OGG. Ogg文件格式可以不断地进行大小和音质的改良,而不影响旧有的编码器或播放器.

MP3：是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III）,简称为MP3. 它被设计用来大幅度地降低音频数据量. 利用 MPEG Audio Layer 3 的技术,将音乐以1:10 甚至 1:12 的压缩率,压缩成容量较小的文件,而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降.

WAV：为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频信息资源,被Windows平台及其应用程序所广泛支持,该格式也支持MSADPCM,CCITT A LAW等多种压缩运算法,支持多种音频数字,取样频率和声道,标准格式化的WAV文件和CD格式一样,也是44.1K的取样频率,16位量化数字,因此在声音文件质量和CD相差无几!

各种关联：wav格式音质最好,但是文件体积较大. mp3压缩率较高,普及率高,音质相比wav要差. ogg与mp3在相同位速率(Bit Rate)编码的情况下, ogg体积更小,并且ogg是免费的不用交专利费（这点国人很中意）.

通过以上对比来看,貌似wav格式并不适合作为网页中的音频格式,而新兴的ogg与mp3格式倒是可以选取一个做为各个浏览器都兼容的格式.

各个浏览器音频控件的显示样式：

从上图可以看到,各个浏览器针对audio控件都有自己的想法,可谓长短不一,风格各异.不过针对这种情况,开发人员倒是可以考虑使用flash播放器或者js对音频进行控制了.

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知