javascript - Ruby:每次点击图片，如何播放不同的音频片段？

Question

我正在用 Ruby 开发一个项目，每次单击一个图像(页面上将有多个图像)时，我想要播放特定于该图像的音频剪辑。根据我目前的情况，每次单击任何图像时只会播放第一个音频剪辑。请在下面查看我的代码:

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

<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>

我怎样才能让它工作？

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 的元素。