javascript - 音频使用js使用图片播放暂停btn

Question

我是js新手，请原谅我。我正在使用带有一些 js 的 html5 音频标签，仅将播放和暂停显示为按钮。我想更改播放文本并暂停图像。比如 playbtn.png 和 pausebtn.png。这是我卡住的地方。

html:::

   <!-- hidden audio player -->
<audio id="audio" controls autoplay hidden="">
    <source src="music/eatForTwo.wav" type="audio/wav">
    <source src="music/eatForTwo.mp3" type="audio/mpeg">
    <p>Your Browser Doesn't Support The HTML5 audio Element</p>
</audio>

<button id="playpause" title="play" onclick="togglePlayPause()" ><img id="imgbtn" src="music/pausebtn.png"/></button>
<!-- javascript for audio control
-->
<script src="code/html5audio.js" type="text/javascript">

</script>

js:::

 // Grab a handle to the video
    var audio = document.getElementById("audio");
   // Turn off the default controls
   audio.controls = false;

function togglePlayPause() {
var playpause = document.getElementById("playpause");
if (audio.paused || audio.ended) {
  playpause.title = "pause";
  playpause.style.backgroundImage = "url(music\pausebtn.png)";
  audio.play();
}
else {
  playpause.title = "play";
  playpause.style.backgroundImage = "url(music\playbtn.png)";
  audio.pause();
}
}

Answer 1

编辑您的 js 如下，但您必须更改url(c:\folder\img.jpg)为url(yourPath).... 现在 yourPath 并不意味着 yourPath 它意味着图像在硬盘上的位置

 // Grab a handle to the video
    var audio = document.getElementById("audio");
   // Turn off the default controls
   audio.controls = false;

function togglePlayPause() {
var playpause = document.getElementById("playpause");
if (audio.paused || audio.ended) {
  //playpause.title = "pause";
  playpause.style.backgroundImage = "url(c:\folder\img.jpg)";
  audio.play();
}
else {
  //playpause.title = "play";
  playpause.style.backgroundImage = "url(c:\img1.jpg)";
  audio.pause();
}