解决微信不能自动播放HTML5网页audio问题

最新推荐文章于 2025-06-04 20:00:00 发布

Sigmele

最新推荐文章于 2025-06-04 20:00:00 发布

阅读量4.8k

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在网页中实现音频自动播放的方法，并针对不同浏览器环境进行了适配。通过使用HTML5的audio标签结合JavaScript来监听页面加载完成事件，实现音频文件加载完毕后自动播放的功能。对于iOS设备，还额外实现了触屏开始事件来触发音频播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<audio src="{$uploadpath}{$FileUpload}" autoplay loop id="audiojs"></audio>
 
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function () {
      function audioAutoPlay() {
          var audio = document.getElementById('audiojs');
              audio.play();
          document.addEventListener("WeixinJSBridgeReady", function () {
              audio.play();
          }, false);
      }
      audioAutoPlay();
  });
 
    if (/i(Phone|P(o|a)d)/.test(navigator.userAgent)) {
      $(document).one('touchstart',
        function(e) {
            $('#audiojs').get(0).touchstart = true;
            $('#audiojs').get(0).play();
            return false;
        });
    }
</script>