javascript - 更改 aud_play_pause() 中的图标

Question

我有一个可以完美播放和停止轨道的图像。我正在尝试将图像源从 play.png 更改为 pause.png，具体取决于轨道是否正在播放。

这是我的代码，用于启动/停止音频，仅使用静态 play.png 图像。如何使用 javascript 在 pause.png 和 play.png 之间更改 src 属性？

<img src='play.png' onclick="aud_play_pause()">

<audio id="audio1">
  <source src="audio1.mp3" type="audio/mp3">
</audio>

<script>
var myAudio=document.getElementById("audio1");

function aud_play_pause(){
  if (myAudio.paused){
      myAudio.play();
  } else {
      myAudio.pause();
  }
}
</script>

Answer 1

您需要使用 javascript 的 DOM 操作函数来更改此设置，如下所示:

var myAudio = document.getElementById("audio1");
var image = document.getElementsByTagName("img")[0];

function aud_play_pause(){
  if (myAudio.paused){
      myAudio.play();
      image.setAttribute("src", "pause.png");
  } else {
      myAudio.pause();
      image.setAttribute("src", "play.png");
  }
}

虽然最好通过 ID 引用 img 元素，但我使用了它的标签名称，因为它是那里唯一的一个。