Audio_tag为不同的按钮播放相同的文件

audio_tag plays same file for different buttons

本文关键字：播放 文件 按钮 Audio tag      更新时间：2023-09-26

我是新手使用audio_tag;我正在尝试使用一组按钮来播放短音频文件。我将离开这篇文章去实现这个功能。我目前有两个音频标签与相关的按钮，应该播放不同的文件。但是，两个按钮都播放第一个音频文件。我给每个按钮分配了不同的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();
      });
});

通过使用$(".audio-play")[0].play()，您总是选择与文件(a.mp3)相同的元素，通常是类audio-play的第一个元素。为了达到你的目的，点击按钮，你必须选择前一个元素，它是一个音频标签，像这样:

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