Canvas 2D Web 应用程序/声音
本章介绍了一种使用 HTML5 audio 元素在 Web 应用程序中播放音频文件的方法。还有一些替代方法（例如 W3C 的 Web 音频 API），但 HTML5 audio 元素似乎是最广泛支持的标准。
本章的示例（也可用 在线 获取； 也可作为 可下载版本 获取）使用三个按钮来调用 audio 元素的 play()、load() 和 play() 或 pause() 方法。实际上，这就是你可以对 audio 元素所做的所有操作（更确切地说，是对媒体元素，请参阅 W3C 的 媒体元素规范）。该示例也可用于测试特定音频文件是否可以在特定平台上播放。例如，我在 iPad 上使用 load 方法多次加载 WAV 文件时遇到了问题。（iPad 不会播放文件，直到我重新加载网页。）
以下部分将讨论代码中与声音相关的部分； 有关其他部分的讨论，请参阅有关 响应式按钮 的章节和之前的章节。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="cui2d.js"></script>
<script>
function init() {
// get images
imageNormalButton.src = "normal.png";
imageNormalButton.onload = cuiRepaint;
imageFocusedButton.src = "selected.png";
imageFocusedButton.onload = cuiRepaint;
imagePressedButton.src = "depressed.png";
imagePressedButton.onload = cuiRepaint;
// get audio
audioHello = document.getElementById("hello");
audioHello.load();
// initialize and start cui2d
cuiInit(myPage);
}
// audio clip
var audioHello;
// create images
var imageNormalButton = new Image();
var imageFocusedButton = new Image();
var imagePressedButton = new Image();
// create buttons
var button0 = new cuiButton();
var button1 = new cuiButton();
var button2 = new cuiButton();
// create page
var myPage = new cuiPage(400, 300, myPageProcess);
function myPageProcess(event) {
if (button0.process(event, 20, 50, 80, 50, "play",
imageNormalButton, imageFocusedButton, imagePressedButton)) {
if (button0.isClicked()) {
audioHello.play();
}
return true;
}
if (button1.process(event, 100, 50, 80, 50, "load",
imageNormalButton, imageFocusedButton, imagePressedButton)) {
if (button1.isClicked()) {
audioHello.load();
}
return true;
}
if (button2.process(event, 180, 50, 140, 50, "play/pause",
imageNormalButton, imageFocusedButton, imagePressedButton)) {
if (button2.isClicked()) {
if (audioHello.paused || audioHello.ended) {
audioHello.play();
}
else {
audioHello.pause();
}
}
return true;
}
if (null == event) {
// draw background
cuiContext.fillStyle = "#A0A0AF";
cuiContext.fillRect(0, 0, this.width, this.height);
}
return false; // event has not been processed
}
</script>
</head>
<body bgcolor="#000000" onload="init()"
style="-webkit-user-drag:none; -webkit-user-select:none; ">
<span style="color:white;">A canvas element cannot be displayed.</span>
<audio id="hello">
<syntaxhighlight src="grouphello.wav" type="audio/wav">
</audio>
</body>
</html>
加载声音的最简单方法是在 body 元素中定义一个 audio 元素
<audio id="hello">
<syntaxhighlight src="grouphello.wav" type="audio/wav">
</audio>
这指定了一个名为“hello”的 audio 元素，以及类型为“audio/wav”的音频文件（源文件）“group hello.wav”。请注意
- 你应该使用相同音频内容但不同格式的多个
source元素，以便所有 Web 浏览器都能找到一个可以播放的元素。（请参阅 此处，了解各种浏览器支持的格式概述； Apple 开发人员应参阅 此处，了解 iOS 支持的格式。） - 你应该指定每个音频文件的类型，因为某些浏览器（特别是 iOS 上的 Safari）在某些情况下似乎需要此信息。
为了访问 audio 元素，应定义一个全局变量，例如
var audioHello;
此变量应在 init 函数中设置； 在示例中
audioHello = document.getElementById("hello");
audioHello.load();
这将使用 audio 标签中定义的名称“hello”，并请求 Web 浏览器加载音频文件。
update 函数使用一个按钮来调用 play()
if (button0.process(event, 20, 50, 80, 50, "play",
imageNormalButton, imageFocusedButton, imagePressedButton)) {
if (button0.isClicked()) {
audioHello.play();
}
return true;
}
还有一个按钮用于再次调用 load()（这通常会将文件倒回开头，但可能会导致某些音频文件格式和 Web 浏览器的组合出现问题）
if (button1.process(event, 100, 50, 80, 50, "load",
imageNormalButton, imageFocusedButton, imagePressedButton)) {
if (button1.isClicked()) {
audioHello.load();
}
return true;
}
第三个按钮检查音频文件是否处于 暂停 状态或已 结束。在这种情况下，它将调用 play()，否则将调用 pause()
if (button2.process(event, 180, 50, 140, 50, "play/pause",
imageNormalButton, imageFocusedButton, imagePressedButton)) {
if (button2.isClicked()) {
if (audioHello.paused || audioHello.ended) {
audioHello.play();
}
else {
audioHello.pause();
}
}
return true;
该示例还可用于测试特定 Web 浏览器的音频文件，这通常是必需的，如下所述。
由于对音频文件格式的支持很大程度上取决于 Web 浏览器（不仅出于技术原因，还出于法律问题），因此在尽可能多的平台上测试带有声音的 Web 应用程序非常重要。如果出现问题，应以多种格式提供相同的内容，以便尽可能多地支持浏览器。在某些情况下，避免多次调用 load 函数可能也有意义，例如，如果音频剪辑非常短，并且在结束之前重新启动没有多大意义。（另请注意，iOS 上的 Safari 中的 load 函数似乎相当慢。）
对于 iBooks 小部件，Apple 建议 使用 MPEG-4 容器中的 AAC 音频，文件扩展名为“.m4a”。