HTML 5 <audio> 标签定义和用法
<audio> 标签定义声音,比如音乐或其他音频流。
HTML5 <audio> 元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成,使多个应用场景得以实现,包括从简单的声音效果到背景音频,再到游戏体验以及更复杂的音频引擎。
HTML 4.01 与 HTML 5 之间的差异
<audio> 标签是 HTML 5 的新标签。
HTML 5 <audio> 标签属性
属性 值 描述
autoplay true | false 如果是 true,则音频在就绪后马上播放。
controls true | false 如果是 true,则向用户显示控件,比如播放按钮。
end numeric value 定义播放器在音频流中的何处停止播放。默认地,声音会播放到结尾。
loopend numeric value 定义在音频流中循环播放停止的位置,默认是 end 属性的值。
loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount numeric value 定义音频片断播放多少次。默认是 1。
src url 所播放音频的 url。
start numeric value 定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。
HTML 5 <audio> 标签标准属性
class, contenteditable, contextmenu, dir, draggable, id, irrelevant,
lang, ref, registrationmark, tabindex, template, title如需完整的描述,请访 HTML 5 中标准属性。
HTML 5 <audio> 标签事件属性
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
HTML 5 <audio> 标签--在播放之前预加载音频
只要您准备好了音频元素,您就可以选择最佳预加载策略。HTML5 <audio> 规范用三个可能的值描述预加载属性:
“none”:提示用户代理,作者不希望用户需要媒体资源,或者是,服务器要尽量减少不必要的流量。如果您的应用场景是每个帖子都带有音频文件的一个播客,这就是一个非常合适的选项,因为它减少了初始预加载的带宽。只要用户播放文件(无论是通过默认可视控件还是 JavaScript 方法 load() 或 play()),浏览器将开始提取音频流。
“metadata”:提示用户代理,作者不希望用户需要媒体资源,但提取资源元数据(维度、持续时间等)是合理的。如果您在构建音频播放器控件,并且您需要关于音频剪辑的基本信息,但尚不需要播放它,推荐该选项。
“auto”:提示用户代理,用户代理可以在对服务器不构成风险的情况下把用户的需求放在首位,直至并包括乐观地下载全部资源。
如果您正在构建一个游戏,这可能是最合适的方式,因为它使您可以在真正开始游戏体验之前预加载全部音频剪辑。
请注意,当您以编程方式设置音频元素的 src 属性时,浏览器将设置preload(预加载)属性,除非它已被设置为 “auto”。基于此原因,如果您的应用场景需要一个不同的值,请务必在设置 src 之前在代码行中指定它。
请注意,当您以编程方式设置音频元素的 src 属性时,浏览器将设置preload(预加载)属性,除非它已被设置为 “auto”。基于此原因,如果您的应用场景需要一个不同的值,请务必在设置 src 之前在代码行中指定它.
HTML 5 <audio> 标签例子1:
1
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>HTML 5 <audio> 标签例子2:
<audio id="media" src="http://www.169it.com/test.mp3" controls></audio>
HTML 5 <audio> 标签例子3:
<audio src="audio/sample.mp3" autoplay>
</audio>
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))
{
audio.src = "audio/sample.mp3";
audio.play();
}
HTML 5 <audio> 标签例子4:
<body>
<audio src="audio/Bass.mp3" autoplay loop>
</audio>
<audio src="audio/Drum.mp3" autoplay loop>
</audio>
<audio src="audio/Crunch.mp3" autoplay loop>
</audio>
<audio src="audio/Guitar.mp3" autoplay loop>
</audio>
<audio src="audio/Pizzicato.mp3" autoplay loop>
</audio>
</body>