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

Question

我正在尝试将音效合并到基于HTML5的数字漫画书中，该漫画书将仅针对iPad发布。我想用一个简单的播放/暂停按钮。我一整天都在玩，但我仍然在为自己有限的JavaScript知识而苦苦挣扎。这里的链接，以漫画和功能规格：

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

我想：

• 有在特定场景中的可点击区域（在这种情况下，车坛）
• 点击后，声音播放，“播放”图标变为暂停图标
• 第二次点击（播放声音时）声音暂停并且图标切换回播放
• 如果声音结束，图标将变回播放

到目前为止，我点击了可点击区域，并且在点击该区域时播放声音，但我需要您的帮助。

Answer 1

这里有你想要的东西： DEMO

基本上有两个事件会在您执行相应操作时触发，播放和暂停。我只是绑定到这些切换按钮图像（在这种情况下，我只是改变背景位置，因为它是一个图像工作表）。

任何疑问让我知道。

Answer 2

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

现在播放的歌曲：

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

暂停：

audio.pause(); 

要更改您的div的背景图片：

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