HTML5 audio教程详解

2013-10-6 20:39| 发布者: admin| 查看: 1915| 评论: 0|来自: microsoft

摘要: 各种声音构成了我们的生活背景。现在，HTML5audio元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成，使多个应用场景得以实现，包括从简单的声音效果到背景音频，再到游戏体验 ...

各种声音构成了我们的生活背景。现在，HTML5<audio>元素使 Web 开发人员可以将声音嵌入他们的应用程序。控制的灵活性加上平台其他功能的集成，使多个应用场景得以实现，包括从简单的声音效果到背景音频，再到游戏体验以及更复杂的音频引擎。

本博客文章介绍了一些在 Web 应用程序中使用<audio> 标签的最佳实践，包括来自真实站点的一些有用的技巧。

在您的页面中添加音频元素

第一步是向您的页面中添加音频元素。您可以通过几种方式完成这一步骤，在标记中声明一个 <audio> 标签，在JavaScript 代码中将一个新的音频元素实例化，或者在页面中嵌入音频流：

</audio>

var audio = document.createElement("audio");

if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))

{

audio.src = "audio/sample.mp3";

audio.play();

}

</audio>

第一种方式使您可以在加载页面时初始化音频组件。第二种方式为您提供了更大的灵活性，并使您可以更好地管理网络流，这是由于它将音频剪辑的加载推迟到应用程序生命周期中的某个特定时间。第三种方式（较少推荐）是将音频文件作为 data-uri嵌入到页面中，减少向服务器发送请求的次数。

请注意，您可以播放由 JavaScript 生成的音频元素，即使它并未实际添加到DOM 树中（如上面的代码片段）。但在页面中添加音频元素将可以显示默认的控制条。

虽然本文未有描述，但您可以支持多种音频文件格式，同样，如果您将音频文件放在服务器上，请记住要在服务器端为mp3 文件(“audio/mpeg”) 注册MIME 类型。此处所举的示例是Internet 信息服务(IIS) 上的设置。

在播放之前预加载音频

只要您准备好了音频元素，您就可以选择最佳预加载策略。HTML5 <audio> 规范用三个可能的值描述预加载属性：

“none”：提示用户代理，作者不希望用户需要媒体资源，或者是，服务器要尽量减少不必要的流量。
如果您的应用场景是每个帖子都带有音频文件的一个播客，这就是一个非常合适的选项，因为它减少了初始预加载的带宽。只要用户播放文件（无论是通过默认可视控件还是 JavaScript 方法 load() 或 play()），浏览器将开始提取音频流。
“metadata”：提示用户代理，作者不希望用户需要媒体资源，但提取资源元数据（维度、持续时间等）是合理的。
如果您在构建音频播放器控件，并且您需要关于音频剪辑的基本信息，但尚不需要播放它，推荐该选项。
“auto”：提示用户代理，用户代理可以在对服务器不构成风险的情况下把用户的需求放在首位，直至并包括乐观地下载全部资源。
如果您正在构建一个游戏，这可能是最合适的方式，因为它使您可以在真正开始游戏体验之前预加载全部音频剪辑。

请注意，当您以编程方式设置音频元素的 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>

循环播放音频文件的另一个方法是在音频剪辑结束时以编程方式调用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>

</audio>

</audio>

</audio>

</audio>

</body>

虽然这种方法很简单直接，但在大多数应用场景中，开发人员还是选择以编程方式创建音频剪辑。以下代码片断显示了如何使用代码动态添加3 个音频剪辑。当它们同时播放时，您将听到C 大调和弦！

AddNote("3C");

AddNote("3E");

AddNote("3G");

function AddNote(name) {