audio_tag 仅播放第一个列出的音频

Posted 2023-02-25

【中文标题】audio_tag 仅播放第一个列出的音频

【英文标题】：audio_tag plays only the first listed audio

【发布时间】：2016-07-06 03:19:38

【问题描述】：

我正在索引视图中使用 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：

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

【参考方案1】：

在您的脚本中，$(".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

【讨论】：

按钮不使用此更新的脚本播放任何音频。关于我还能尝试什么的任何想法？感谢您的帮助-新手在这里:)

@gonzalo2000 我刚刚更新了我的答案。您可以运行我根据您的视图代码创建的示例代码。

谢谢。我仍然失去了更新脚本的所有单词的按钮功能。否则页面会按预期显示，我在日志中看不到错误。

在我的示例中，我提供了一些 html，以便您可以将您的与我的进行比较。如果您的 HTML 结构与我的相似，它将起作用。您的页面生成的 HTML 是什么？

我明白我的问题是什么，返回需要[0]，因此return audio[0].play();（如您的小提琴所示：）