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(); 
});