我咨询过audio_tag documentation来在我的一个 View 中实现音频功能,以在加载页面时播放文件,然后通过控件再次播放。该功能当前可以通过从Word模型中提取音频文件来工作:

<%= audio_tag current_word.sound, autoplay: true, controls: true %>

我对用glyphicon按钮替换audio_tag产生的默认滚动器/音量控件很感兴趣(我预计音频文件平均会持续几秒钟,因此不需要滚动音频文件或调节音量) 。

有没有一种方法可以将上述audio_tag与以下按钮组合在一起以实现单击播放选项?
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>

我一直在看有关该主题的blog帖子,尽管我不确定在应用程序中将js放置在哪里,以便将类似的解决方案与glyphicon一起使用。

最佳答案

你可以这样做:

<%= audio_tag current_word.sound, class: "audio-play" %>

<button type="button" class="btn btn-default btn-lg", id="audioButton">
  <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button> #Add id audioButton for js purpose

在您的app / assets / javascripts / application.js中:
jQuery(document).ready(function() {
$("#audioButton").on("click", function() {
        $(".audio-play")[0].currentTime = 0;
        return $(".audio-play")[0].play();
      });
});

关于ruby-on-rails - glyphicon按钮作为audio_tag控件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37605530/

10-17 03:10