HTML and CSS Reference
In-Depth Information
Loading and Playing the Audio
Wearegoingtousethe canplaythrough and progress eventstoload <audio> beforewetry
to play it. Here is how we embed the audio for song1 :
<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.
Similar to most of the applications we have built thus far in this topic, we will create event
handlers for progress and canplaythrough after the window DOM object has finished load-
ing, and then we will call the load() method of audioElement to force the audio file to start
window . addEventListener ( 'load' , eventWindowLoaded , false
false );
function eventWindowLoaded () {
var audioElement = document . getElementById ( "theAudio" );
audioElement . addEventListener ( 'canplaythrough' , audioLoaded , false
false );
audioElement . addEventListener ( 'progress' , updateLoadingStatus , false
false );
audioElement . load ();
Whenthe canplaythrough eventisdispatched, canvasApp() iscalled.Thenwestartplaying
theaudiobyretrievingareferencetothe audio elementintheHTMLpagethroughtheDOM,
with a call to getElementById() . (We will create a variable named audioElement that we
willusethroughoutthecanvasapplicationtoreferencethe audio elementintheHTMLpage.)
We then call the play() function of audioElement :
var audioElement = document . getElementById ( "theAudio" );
audioElement . play ();
You might be wondering why we didn't use the preload attribute of HTMLAudioElement in-
stead of forcing it to load by listening for the canplaythrough event. There are two reasons
for this, and both apply to the video element as well. First, you want to preload so that you
are sure the assets you need are available to your program at runtime. Second, preloading en-
sures that the user will see something useful or interesting while everything is loading. By
using the standard preload attribute, you (in theory) force your audio assets to load before
the page loads. Because Canvas apps are interactive and can require many more assets than
Search WWH ::

Custom Search