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”。