Question

我在html文件中有多个音频标签：

<audio src="/sound/file1.ogg" id="sound" class="file1"></audio>
<a href="#" data-audio="file1" class="play">
 <i class="fa fa-volume-up"></i>
</a>

<audio src="/sound/file2.ogg" id="sound" class="file2"></audio>
<a href="#" data-audio="file2" class="play">
 <i class="fa fa-volume-up"></i>
</a>

and so on ...

播放由以下功能触发：

$('.play').on('click', function(e){
        e.preventDefault();
        audioCls = $( this ).data('audio');
        $('.'+audioCls).trigger('play');
    });

一切都像桌面浏览器上的魅力一样。如果单击播放按钮，则每次单击它时都会播放音频。然而，在移动设备上，它只播放一次声音，我无法弄清楚原因。有什么想法吗？

作为旁注：音频文件非常小（最大100 kb），只有几秒钟。

更新

似乎Android在您播放一次后暂停该文件。您需要从操作系统UI（屏幕上方的通知区域）取消暂停，以便重播。

这是某种安全功能吗？我可以从响应式网站上绕过它吗？

Answer 1

完全抛弃<audio>标签，寻求更优雅的JS解决方案。

<a href="#" data-audio="file1" class="play">
 <i class="fa fa-volume-up"></i>
</a>

<a href="#" data-audio="file2" class="play">
 <i class="fa fa-volume-up"></i>
</a>

<script>
 function cassettePlay(cassette){
     var cassettePlayer = new Audio("");
     cassettePlayer.src=cassette;
     cassettePlayer.pause();
     cassettePlayer.load();
     cassettePlayer.play();
 }

 $('.play').on('click', function(e){
     e.preventDefault();
     var cassette = "/audio/" + $( this ).data('audio') + ".ogg";
     cassettePlay(cassette);
 });
</script>

有效！

Ogg文件无法在手机上多次播放

1 个答案: