ios不能自动播放音频

最新推荐文章于 2022-03-15 10:50:41 发布

原创最新推荐文章于 2022-03-15 10:50:41 发布 · 7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ios下audio不能自动播放 #audio设置属性autoplay #对android和ios都不生效 #在页面加载完成自动播放背景音乐

微信专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在iOS设备上的Safari浏览器及微信环境中实现音频自动播放的方法。由于iOS平台的限制，直接触发播放可能无效。文章提供了在微信WeixinJSBridgeReady函数内触发播放的有效方案。

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

对audio，利用trigger('play')在ios上不能触发audio播放，原因ios 内置浏览器safari要播放音频，需要人为去触发，或者在微信WeixinJSBridgeReady()函数内设置自动触发。给audio设置autoplay也不生效。

html代码如下：

      <audio src="mp3/shakingAudio.mp3" preload="preload" id="shakingAudio"></audio>

js代码如下（先引入jquery）：

      $(function(){
           $('#shakingAudio').trigger('play');
      });

结果：该方法在android下可以触发audio播放事件，但是不能触发ios下audio播放事件

解决方法：在微信WeixinJSBridgeReady函数内触发播放事件

1、在html中先引入jweixin.js

         <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2、js代码如下：

         $(function(){
            $('#shakingAudio').play();
            document.addEventListener('WeixinJSBridgeReady',function(){
                    $('#shakingAudio').play();
            },false);
         });

结论：通过以上设置就可以在android和ios下自动播放音频了。亲测可用

以下方法，亲测不行

1、在WeixinJSBridgeReady()里面设置延时在播放

  $('#shakingAudio').play();
            document.addEventListener('WeixinJSBridgeReady',function(){
                   setTimeOut( $('#shakingAudio').play();
            },5000,false);
  });

言下之意就是只支持启动的时候播放

2、在微信的ready()函数内添加play()函数

$(function(){
    autoPlay();

    function autoPlay(){
          wx.config({
               //配置信息，即使不正确也能使用wx.ready()
               debug:false,
               appId:'',
               timestamp:1,
               nonceStr:'',
               signature:'',
               jsApiList:[]
          });
          wx.ready(function(){
                $('#shakingAudio').play();
          });
    }
});

3、

$(function(){
     $('#shakingAudio')[0].play();
});