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只播放第一个列出的音频

回答

相关问题