audio_tag는 첫 번째로 나열된 오디오 만 재생합니다.

Question

색인보기에서 audio_tag로 작업하고 있습니다. 각 단어의 해당 사운드 파일을 버튼 클릭으로 액세스 할 수있게하려고합니다. 지금 현재 모든 버튼은 나열된 첫 번째 단어에 해당하는 사운드를 재생합니다. 이 상황에서 this 게시물의 답변을 일반화하려고 노력했지만 모델에서 사운드 파일을 나열하는 컨텍스트에서 효과를 일반화하는 방법에 대해 분실했습니다. 버튼을 각 특정 항목과 연결된 사운드로 재생하려면 어떻게합니까?

보기 :

<ul> 
    <% @lesson.words.each do |word| %> 
    <li> 
     <%= image_tag word.image_url(:thumb) if word.image? %> &nbsp   
     <b><%= word.term %></b> 

     <%= audio_tag word.sound, class: "audio-play" %> 
     <button type="button" class="btn btn-default audio-button"> 
      <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
     </button> 

    </li> 
    <br> 
    <% end %> 
</ul> 

application.js : 1 나열된 단어의 음성이 왜 스크립트에서

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

Answer 1

, $(".audio-play")[0] 전체 페이지에 1 오디오 태그를 반환합니다, 즉이다 항상 연주.

업데이트 스크립트 업데이트 스크립트에서

jQuery(document).ready(function() { 
    $(".audio-button").on("click", function() { 
    var audio = $(this).prev(".audio-play"); 

    audio.currentTime = 0; 
    return audio.play(); 
    }); 
}); 

, 오디오 바로 옆에 검색되는 클릭되는 버튼 태그와 해당 사운드가 재생됩니다 다음과 같다.

실행 sample code