Information Technology Reference
In-Depth Information
Audio Data API
Using the Audio Data API, a developer can interact with their audio data in ways that
were not possible just a few years ago. Using JavaScript and some HTML, you could
easily create your own controls to interact with your audio data, as we can see in
Listing 11-3.
Taking a look at the following example, you can see that we are expanding on Listing 11-1
and adding in some new custom built controls to play and stop the audio.
Listing 11-3.
A more advanced look at the HTML5 Audio Data API
<audio id="audioDemo">
<source src="audio/stairwell.ogg" type="audio/ogg" />
<source src="audio/stairwell.mp3" type="audio/mpeg" />
"Sorry, your browser does not support the audio element."
</audio>
<button id="play">Play</button>
<button id="pause">Pause</button>
<script type="text/javascript">
var audio = document.getElementById('audioDemo');
var playButton = document.getElementById('play');
var pauseButton = document.getElementById('pause');
playButton.addEventListener('click', function() {
audio.play();
}, false);
stopButton.addEventListener('click', function() {
audio.pause();
}, false);
</script>
When you run this code in your browser, the first thing you would probably notice is the
lack of any audio controls on the page at all, except the two buttons we added to the
page with the IDs of
play
and
pause
. These buttons, while not as pretty as those seen in
Figure 11-6, will be our only means of manipulating the audio on the page.
Figure 11-6.
Loading our demo HTML5 audio document on an Android 2.3.4 Gingerbread device
