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

Question

我正在尝试将声音效果合并到基于HTML5的数字漫画书中，该漫画书将仅针对iPad发布。我想使用一个简单的播放/暂停按钮。我一整天都在玩，但我仍然在努力学习有限的JavaScript知识。这是漫画和功能规范的链接：

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

我想：

• 在特定场景（在本例中为汽车场景）上有可点击区域
• 点击后，播放声音，“播放”图标变为暂停图标
• 第二次点击（播放声音时）声音暂停，图标切换回播放
• 如果声音结束，图标会变回播放

到目前为止，我有可点击的区域，当点击该区域时会播放声音，但我需要你的帮助。

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>

现在播放这首歌：

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

暂停：

audio.pause();

更改div的背景图片：

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

Answer 2

这是你想要的：DEMO

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

有任何问题让我知道。