audio_tagは異なるボタンで同じファイルを再生します

Question

私はaudio_tagの使用時に新しいです。短いオーディオファイルを再生するために一連のボタンを使用しようとしています。私はこの機能を実装するためにthis投稿を行っています。私は現在、別のファイルを再生する必要があります関連付けられたボタンで2つのオーディオタグを持っています。ただし、両方のボタンが最初のオーディオファイルを再生します。私は各ボタンに異なるIDを割り当てていますが、これは役に立ちません。最初のファイルを削除すると、2番目のボタンが予想されるファイルを再生します。 （mp3ファイルは/ public/audiosにあります）。

正しいファイルをそのボタンに関連付けるにはどうすればよいですか？

ビュー：

<%= audio_tag "a.mp3", class: "audio-play" %> 
<button type="button" class="btn btn-primary btn-lg", id="audioButtonA">A</button> 

<br> 

<%= audio_tag "e.mp3", class: "audio-play" %> 
<button type="button" class="btn btn-primary btn-lg", id="audioButtonE">E</button> 

application.jsは：

jQuery(document).ready(function() { 
$("#audioButtonA").on("click", function() { 
     $(".audio-play")[0].currentTime = 0; 
     return $(".audio-play")[0].play(); 
     }); 
}); 

jQuery(document).ready(function() { 
$("#audioButtonE").on("click", function() { 
     $(".audio-play")[0].currentTime = 0; 
     return $(".audio-play")[0].play(); 
     }); 
}); 

Answer 1

$(".audio-play")[0].play()を使用することによって、あなたは常にファイル（a.mp3）、クラスaudio-playと、一般に、第1の要素と同じ要素を選択しています。目的を達成するには、ボタンをクリックすると、オーディオタグである前の要素を次のように選択する必要があります。

$("#audioButtonE").on("click", function() { 
    var audio = $(this).prev()[0]; 
    audio.currentTime = 0; 
    return audio.play(); 
});