audio_tag只播放第一個列出的音頻

我正在使用audio_tag在索引視圖中：我想讓每個單詞的相應聲音文件都可以通過單擊按鈕訪問。截至目前，所有按鈕都會播放與列出的第一個單詞相對應的聲音。我一直試圖將this後的回答推廣到這種情況，但是我失去了如何在從模型中列出聲音文件的上下文中概括效果。我怎樣才能讓按鈕播放與每個特定項目相關的聲音？audio_tag只播放第一個列出的音頻

查看：

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

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

來源

2016-07-06 gonzalo2000

在腳本中，$(".audio-play")[0]將返回第一個音頻標籤在整個頁面，這就是爲什麼第一個上市字的音頻總是玩。

更新你的腳本如下

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

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

在更新後的腳本，旁邊就是被點擊檢索按鈕音頻標籤和相應的聲音將被播放。

運行sample code

來源

2016-07-06 04:35:49 Hoa

按鈕不會使用此更新的腳本播放任何音頻。任何想法，我還可以嘗試什麼？感謝您的幫助 - 新手在這裏:) – gonzalo2000

@ gonzalo2000我剛剛更新了我的答案。您可以運行基於您的視圖代碼創建的示例代碼。 – Hoa

謝謝。我仍然失去了使用更新腳本的所有單詞的按鈕功能。該頁面按預期方式顯示，並且在日誌中看不到錯誤。 – gonzalo2000

audio_tag只播放第一個列出的音頻

回答

相關問題