11-加载并播放音频

7.3.4　加载并播放音频

在试图播放音频之前，要使用canplaythrough和progress事件加载

<audio id="theAudio" controls>
<source src="song1.mp3" type="audio/mp3">
<source src="song1.wav" type="audio/wav">
<source src="song1.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

与在本书中创建的大多数应用程序类似，在window DOM对象加载完成后创建progress事件和canplaythrough事件的处理函数。然后，通过调用audioElment对象的load()方法开始加载音频文件。

window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded(){
　 var audioElement = document.getElementById("theAudio");
　 audioElement.addEventListener('progress',updateLoadingStatus,false);
　 audioElement.addEventListener('canplaythrough',audioLoaded,false);
　 audioElement.load();
}

在发送 canplaythrongh事件后调用 canvasApp函数。通过调用DOM对象的getElementById()函数可以从HTML页面中获取到audio元素的引用，然后开始播放音频（这里创建一个名为audioElement的变量。整个画布应用程序将使用该变量引用HTML页面中的audio元素）。接下来，调用audioElement的play()函数。

var audioElement = document.getElementById("theAudio");
audioElement.play();

读者可能想知道为什么没有使用HTMLAudioElement的preload属性，而是强行加载音频并监听canplaythrough事件。这样做有两个对video元素也同样适用的原因：第一，预加载的目的是为了确保程序在运行时所需的资源可用；第二，预加载保证用户在加载时可以看到一些有用或有趣的东西。而使用标准的preload属性，理论上会在页面加载之前强行加载音频。由于画布应用是交互式的程序，所需要的资源比在页面加载时加载的资源要多。因此，应避免使preload属性并在应用内加载资源。