各种声音构成了我们的生活背景。现在,HTML5<audio>元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成,使多个应用场景得以实现,包括从简单的声音效果到背景音频,再到游戏体验以及更复杂的音频引擎。 本博客文章介绍了一些在 Web 应用程序中使用<audio> 标签的最佳实践,包括来自真实站点的一些有用的技巧。 在您的页面中添加音频元素第一步是向您的页面中添加音频元素。您可以通过几种方式完成这一步骤,在标记中声明一个 <audio> 标签,在JavaScript 代码中将一个新的音频元素实例化,或者在页面中嵌入音频流: <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(); } <audio src="data:audio/mpeg,ID3%02%00%00%00%00%..." autoplay> </audio> 第一种方式使您可以在加载页面时初始化音频组件。第二种方式为您提供了更大的灵活性,并使您可以更好地管理网络流,这是由于它将音频剪辑的加载推迟到应用程序生命周期中的某个特定时间。第三种方式(较少推荐)是将音频文件作为 data-uri嵌入到页面中,减少向服务器发送请求的次数。 请注意,您可以播放由 JavaScript 生成的音频元素,即使它并未实际添加到DOM 树中(如上面的代码片段)。但在页面中添加音频元素将可以显示默认的控制条。 虽然本文未有描述,但您可以支持多种音频文件格式,同样,如果您将音频文件放在服务器上,请记住要在服务器端为mp3 文件(“audio/mpeg”) 注册MIME 类型。此处所举的示例是Internet 信息服务(IIS) 上的设置。 在播放之前预加载音频只要您准备好了音频元素,您就可以选择最佳预加载策略。HTML5 <audio> 规范用三个可能的值描述预加载属性:
请注意,当您以编程方式设置音频元素的 src 属性时,浏览器将设置preload(预加载)属性,除非它已被设置为 “auto”。基于此原因,如果您的应用场景需要一个不同的值,请务必在设置 src 之前在代码行中指定它。 您可以通过使用 F12 Developer Tools(Network 选项卡)运行 来预览这三个选项对网络的影响。为了调试,您可以通过选中“总是从服务器刷新”菜单来模拟新的调用并禁用本地缓存。 preload=none: preload=metadata: preload=auto: 虽然这个属性在初始化阶段非常有用,但您可能还需要知道浏览器何时真正下载音频剪辑,并准备好播放。您可以通过监听 “canplaythrough” 事件获取该信息;该事件由用户代理调用,一旦它判断现在准备开始播放,媒体资源就能以当前播放率一直播放至其结束,无需停顿以获取缓冲。 var audio = document.createElement("audio"); audio.src = "audio/sample.mp3"; audio.addEventListener("canplaythrough", function () { alert('The file is loaded and ready to play!'); }, false); 循环在音频应用场景中的另一个常见请求是循环播放声音剪辑的功能。有了 HTML5 <audio>,您可以使用 loop(循环)属性实现该功能;这个设置将一直循环播放您的剪辑,或一直播放直至用户或应用程序激活 pause() 音频控件。 <audio src="audio/sample.mp3" autoplay loop> </audio> 循环播放音频文件的另一个方法是在音频剪辑结束时以编程方式调用play() 方法;这样做最终将使您可以管理两次循环之间的延迟时间。 var audio = document.createElement("audio"); audio.src = "piano/3C.mp3"; audio.addEventListener('ended', function () { // Wait 500 milliseconds before next loop setTimeout(function () { audio.play(); }, 500); }, false); audio.play(); 请注意,在音频元素上执行的任何 play() 调用,在声音真正结束之前将不会生效。如果您希望“取消并重启”当前声音,将需要重置 currentTime。 var audio = null; audio = document.createElement("audio"); audio.src = "piano/3C.mp3"; audio.addEventListener('ended', function () { audio.play(); }, false); function play() { audio.play(); } function restart() { audio.currentTime = 0; audio.play(); } 多个音频标签如果您的应用场景需要同时多次播放同一个音频文件(就是说,产生重叠的声音),可以通过对同一个文件创建多个音频标签来实现这种效果。如果您同时使用不同的音频文件,这个方式显然也是适用的。正如我们之前在本文中所述的那样,可以采用编程方式添加它们或在标记中将它们实例化。 以下代码片段显示了如何使用标记加载和播放多个音频文件。音频示例的长度都一样;在执行结束时,它们将从头开始重新循环播放。当在 Internet Explorer 9 中播放它们时,可以看到它们将在多个循环中自动同步。您将发现这 5 种声音的组合播放出来与之前的演示中的音频文件 (“sample.mp3”) 相像。 <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> 虽然这种方法很简单直接,但在大多数应用场景中,开发人员还是选择以编程方式创建音频剪辑。以下代码片断显示了如何使用代码动态添加3 个音频剪辑。当它们同时播放时,您将听到C 大调和弦! AddNote("3C"); AddNote("3E"); AddNote("3G"); function AddNote(name) { var audio = document.createElement("audio"); audio.src = "piano/" + name + ".mp3"; audio.autoplay = true; } 此代码模式在任何浏览器上都可以正常工作,并且将使您可以构建极具吸引力的应用场景! 重要的是要记住,当您的应用程序或游戏变得更复杂时,您将最终面临两个限制:在同一个页面中可以预加载的音频元素数量,以及可以同时播放的音频元素数量。 这些数量取决于浏览器,还有 PC 的能力。根据我的经验,Internet Explorer 9 可以轻松地同时处理几十个并发音频元素。其它浏览器则做不到,当您循环播放多个文件时,可能会遇到 明显的延迟和失真。 |
html5star team © 2012-2013 html5星空 Comsenz Inc.
GMT+8, 2021-3-5 14:36 , Processed in 0.085070 second(s), 29 queries .