Question

我正在使用Ruby进行项目，每次点击一个图像（页面上会有多个图像），我想要一个特定于该图像的音频剪辑。根据我到目前为止，每次点击任何图像时，只会播放第一个音频剪辑。请参阅下面的代码：

＆＃13;

function play() {
  var audio = document.getElementById("audio");
  audio.play();
}

＆＃13;

<div>
  <img src="https://metrouk2.files.wordpress.com/2016/04/red-horse-dot-m_2778460a.jpg" value="PLAY" onclick="play()">
  <audio id="audio" src="audios/track1.mp3"></audio>
</div>
<div>
  <img src="http://www.clker.com/cliparts/O/3/O/G/7/D/green-circle-hi.png" value="PLAY" onclick="play()">
  <audio id="audio" src="audios/track2.mp3"></audio>
</div>

＆＃13;

我该如何做到这一点？

Answer 1

试试这个：

<script>
  function play(emt){
    var audio = emt.getElementsByTagName("audio")[0];
    audio.play();
  }
</script>

<div onclick="play(this)">
  <img src="https://metrouk2.files.wordpress.com/2016/04/red-horse-dot-m_2778460a.jpg" value="PLAY">
  <audio src="audios/track1.mp3" ></audio>
</div>

<div onclick="play(this)">
  <img src="http://www.clker.com/cliparts/O/3/O/G/7/D/green-circle-hi.png" value="PLAY">
  <audio src="audios/track2.mp3" ></audio>
</div>

我更改了您的代码，以便在onclick调用play时，它会传递被点击作为参数的<div>。然后play查找附加到图像的音频元素。

根据经验，您不应该在同一页面上拥有两个具有相同ID的元素。

Answer 2

您的<script> function play(id){ var audio = document.getElementById(id); audio.play(); } </script> <div> <img src="https://metrouk2.files.wordpress.com/2016/04/red-horse-dot-m_2778460a.jpg" value="PLAY" onclick="play('audio1')"> <audio id="audio1" src="audios/track1.mp3" ></audio> </div> <div> <img src="http://www.clker.com/cliparts/O/3/O/G/7/D/green-circle-hi.png" value="PLAY" onclick="play('audio2')"> <audio id="audio2" src="audios/track2.mp3" ></audio> </div>查询返回多个元素，因为两个ID都是'audio'。给它们唯一的ID并将你想要的内容传递给函数，如下所示：

{{1}}

Ruby：每次点击图像时，如何播放不同的音频剪辑？

2 个答案: