HTML5音频标签＜audio＞ - Kaiqisan

HTML5音频标签

在说HTML5新标签的时候，先了解一下HTML5吧！

在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

科普来源：百度百科 https://baike.baidu.com/item/html5/4234903?fr=aladdin

前排提示：IE8以下不支持该新功能

关键代码

<audio controls="controls" class="video" src="./video/music.mp3" type="video/mp3" >
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>

这样就构成了一个最标准的音频标签，中间的文字在当前浏览器不支持audio标签的时候才会显示。上面的属性只是一部分的，下面，我们介绍它的所有的属性。

src: 指定音频来源的地址

type: 指定资源的文件类型

loop: 决定是否在播完之后自动重播

<audio controls="controls" src="./video/music.mp3" type="video/mp3" loop>
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>
或者
<audio controls="controls" src="./video/music.mp3" type="video/mp3" loop="loop">
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>

controls: 决定是否使用浏览器原生的音频控件，如果不打算使用的话，即使你定义了这个标签，它也不会显示在页面里面，这样是为了方便我们开发者自定义一个音频组件，可以拥有更加丰富的外形展示，丰富页面内容。

<audio src="./video/music.mp3" type="video/mp3" controls>
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>
或者
<audio src="./video/music.mp3" type="video/mp3" controls="controls">
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>

preload: 决定是否在页面载入之后加载视频内容，如果使用 “autoplay”，则忽略该属性。它有三个属性值。

• none: 不自动加载音频
• metadata: 不自动加载音频，但要获取音频的一些基本信息–音频时长，音频大小等等。
• auto: 马上加载音频信息,一般在h5小游戏或者在和用户交互紧密的一些页面里面适合使用。

autoplay: 在载入音频之后就自动播放音频内容，不建议在普通的页面使用自动载入音频模式的时候再隐藏音频播放控件(不设定controls属性)，这样会让用户极其反感。

muted: 设定静音

<audio src="./video/music.mp3" type="video/mp3" muted>
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>

<audio src="./video/music.mp3" type="video/mp3" muted="muted">
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>

<source>: 属于音频内部的一个标签，它可以指定多个不同扩展名的音频文件，用于兼容一些浏览器无法播放某些音频格式的问题。

<audio controls="controls">
	<source src="music.ogg" type="audio/ogg">
	<source src="music.m4a" type="audio/mpeg">
	<source src="music.mp3" type="audio/mpeg">
    <source src="music.wav" type="audio/mpeg">
	对不起，您的破浏览器不支持我们的音频播放模块
</audio>

下图提供不同浏览器(目前市场主流的浏览器)对音频文件的兼容情况

音频格式|浏览器	Chrome	Firefox	IE9	Opera	Safari
OGG	√	√	√	√	×
MP3	√	×	√	×	√
WAV	×	√	×	√	×

PS: audio标签里的src和source标签里的src区别是audio标签里的src资源优先度高于source标签里的src资源。