音频播放
在Html5之前,在网页中播放音频没有标准的做法,大多使用插件(如Flash),在Html5中
<audio>
定义了一个播放音频的标准。
HTML5
<audio>
支持播放三种音频格式:MP3,Wav,Ogg。其中MP3在个主流浏览器中都有比较好的支持,IE不支持Wav和Ogg,Safari也不支持Ogg。
<audio>
的一些属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
举个例子:
<audio src="http://7xt2se.com1.z0.glb.clouddn.com/I%20Need%20A%20Dollar.mp3"
controls="controls"
autoplay
loop>
您的浏览器不支持 audio 标签。
</audio>
上面的代码可以创建一个音频播放器,自动播放,且重复播放。在<audio>
标签中的文字会在浏览器不支持audio标签时显示。
除了通过设置<audio>
的src属性来指定播放文件外还可以通过,还可以通过嵌套<source>
标签的方式进行设置:
<audio controls loop preload="auto" >
<source src="http://7xt2se.com1.z0.glb.clouddn.com/I%20Need%20A%20Dollar.mp3" type="audio/mpeg">
<source src="http://7xt2se.com1.z0.glb.clouddn.com/I%20Need%20A%20Dollar.mp3" type="audio/mpeg">
<source src="http://7xt2se.com1.z0.glb.clouddn.com/I%20Need%20A%20Dollar.mp3" type="audio/mpeg">
您的浏览器不支持 audio 标签。
</audio>
audio标签中可以嵌套多个source标签,浏览器使用第一个可以解析的source。 source的type如下表所示:
文件格式 | Type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
W3school相关教程 http://www.w3school.com.cn/html5/html5_audio.asp http://www.w3school.com.cn/jsref/dom_obj_audio.asp http://www.w3schools.com/html/html5_audio.asp http://www.w3schools.com/tags/ref_av_dom.asp