Html5 audio标签(属性)的使用详解

audio标签的语法结构：




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

audio标签的基本属性：

audio支持的属性主要有以下几个，src，loop，autoplay，controls，preload

  • src（链接地址，不多说，写代码的都知道）；
  • loop（顾名思义，循环属性，设置是否循环播放）；
  • autoplay（写代码还有一个好处是学英语，这个单词的意思当然是自动播放了，比较直观。）；
  • controls （右学习了一个单词，control，控制嘛，也是windows打开控制面板的命令，出现此属性则提供给用户一个可以控制音频的控件）；
  • preload（终于出来一个有点嚼头的属性了，可以选择设置“none”，“metadata”，“auto”）

    none：默认不加载，按需加载。适合，比如你的文章中有很多audio，你需要用控件或者js来控制它们是否播放。

    metadata:：元数据，默认不加载，但是可以提取该音频的元数据信息。适合，你添加了一个音频，并显示控件，但是你需要在不播放该音频的时候调用它的一些信息。

    auto：自动加载，如果不是动态载入的audio，该音频会随页面一起加载进来。适合，一些音频较多的游戏类页面，在游戏加载完成的时候将游戏声音全部加载进来。

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

针对html5标签的兼容性来看，目前浏览器的最新版本都已经能够让html5跑上他们的跑道了。虽然国内ie家族的某些老前辈仍然活跃在舞台上，但是相信他们退役的那一天总是会到来的。不过有些遗憾的是，各个浏览器厂商对于不同的音频格式有着不同的兼容。（这里貌似涉及专利以及特权许可的各种协议…），我们来看下表各个浏览器针对音频格式的兼容性

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

以上这些意味着除了ogg格式，不管采用哪种格式，都会有至少2/5的浏览器不能正常播放该音频文件。所以新兴的免费的ogg格式音频必会成功登顶网页声音的金字塔

当然我们可以使用多音频格式来兼容不同的浏览器



音频格式知识普及：

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显示

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

《Html5 audio标签(属性)的使用详解》上有35条评论

  2. 楼主能否讲解下 audio 的loop 属性，我想循环播放，但是loop属性不支持，用end事件判断，end事件也不支持，那怎么实现循环播放啊，用的是chrome浏览器

    回复

    1. 你可以使用ogg和mp3同时加载…
      基本上兼容所有支持audio标签的浏览器…
      同时加载浏览器会智能选取一个…
      flash在html5中作用会越来越低…
      而且ie6居然还没灭绝啊…

      回复

回复 老赵 取消回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code