audio_tag爲不同的按鈕播放相同的文件

Question

我剛剛使用audio_tag;我正嘗試使用一組按鈕播放短音頻文件。我要去this發佈實施此功能。我目前有兩個音頻標籤和相關的按鈕，它們應該播放不同的文件。但是，兩個按鈕都播放第一個音頻文件。我爲每個按鈕分配不同的ID，但這不起作用。如果我刪除第一個文件，則第二個按鈕將播放預期的文件。 （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第一元件相同的元件。要實現您的目標，按鈕單擊您必須選擇以前的元素，這是一個音頻標籤，如下所示：

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