音频播放

在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

results matching ""

    No results matching ""