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を持つ2つの要素を使用しないでください。

Answer 2

getElementByIdクエリは、両方のIDが「オーディオ」であるため、複数の要素を返しています。それらにユニークなIDを与えて、あなたが再生したいものを次のような関数に渡します：

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