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

Posted 2023-02-25

【中文标题】Ogg文件无法在手机上多次播放

【英文标题】：Ogg file not playing multiple times on mobile

【发布时间】：2016-07-27 11:46:43

【问题描述】：

我在一个 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 似乎会暂停该文件。您需要从 OS UI（屏幕上方的通知区域）取消暂停才能重播。

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

【参考方案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>

有效！