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

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

1 个答案: