使用HTML5和JavaScript播放/暂停音频按钮

Question

I am trying to incorporate sound effects into a HTML5 based digital comic book which will be published for iPad only. I want to use a simple play/pause button. I have been playing around all day but I am still struggling with my limited JavaScript knowledge. Here's the link to the comic and a functionality spec:

http://spiritdigital.co.uk/outpost/issue-interactive/05.html

I want to:

• Have a clickable area over a particular scene (in this case, the car scene)
• On click, a sound plays and the 'play' icon changes to a pause icon
• On second click (when sound is playing) the sound pauses and icon switches back to play
• If sound ends, icon changes back to play

So far, I have the clickable area and the sound plays when the area is clicked but I need your help for the rest.

Answer 1

<audio id="myaudio">
    <source src="song.ogg" type="audio/ogg" />
    <source src="song.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

Now to play the song :

var audio = document.getElementById('myaudio');
audio.play();

Pause:

audio.pause();

To change the background image of your div :

var control = document.getElementById('yourdiv');
control.style.backgroundImage = 'pathtoanotherimage';

Answer 2

Here's what you want: DEMO

Basically there's two events that fire, play and pause, when you do the respective action. I'm just binding to these to toggle the button image (in this case I just change the background-position as it's an image sheet).

Any questions let me know.