Question

我已经咨询了audio_tag documentation，以便在我的一个视图中实现音频功能，以便在加载页面时播放文件，然后通过控件再次播放。通过从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帖子，但我不确定应用程序在哪里放置j以便使用glyphicon来应用类似的解决方案。< / p>

Answer 1

你可以这样做：

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

glyphicon按钮作为audio_tag控件

1 个答案: