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

Play/pause audio button using HTML5 and JavaScript

本文关键字：暂停 音频 按钮 播放 HTML5 JavaScript 使用      更新时间：2023-09-26

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

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

我想：

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

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

这是你想要的： 演示

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

任何问题请告诉我。

<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';
相关文章：