我咨询过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/