js解决音频audio在IOS系统下无法自动播放问题

Posted 2023-04-22

参考技术A ios中使用audio，日常踩坑

必须！！！点击后才调用xxx.play()这个方法

但是我们音频链接数据如果是网络请求而来的，那我们可以这样做：

1.在无播放链接的情况下先调用一次xxx.play()，然后暂停xxx.pause()

2.请求到数据以后，替换链接

3.判断readyState的值

0 = HAVE_NOTHING - 没有关于音频是否就绪的信息
1 = HAVE_METADATA - 关于音频就绪的元数据
2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
4.如果readyState===4，调用xxx.currentTime = 0 初始化

5.最后调用xxx.play()

感谢 https://blog.csdn.net/cmyh100/article/details/80695271
给我灵感

我的做法是： 在获取到音频链接前

先执行一次play 然后暂停，最后在获取到音频地址后 将音频时间设置为0 最后重新调用paly()

ios微信h5音频audio无法自动播放

iPhone手机音频、视频无法自动播放？

通过下面的方式可以解决，在iPhone手机微信中正常自动播放。

必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效，猜测微信接口做了处理~

测试了90%的iPhone机型，大部分直接调用audio的play方法就可以自动播放了，但是一些奇葩iPhone机不可以

<audio preload="preload" controls id="audio" src="audio.mp3" loop></audio>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="video.png">
      <source id="mp4" src="video.mp4" type="video/mp4">
      <source id="webm" src="video.webm" type="video/webm">
      <source id="ogv" src="video.ogv" type="video/ogg">
      <p>您的浏览器不支持</p>
</video>
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
     //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
     document.getElementById(‘car_audio‘).play();
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
        document.getElementById(‘audio‘).play();
        document.getElementById(‘video‘).play();
    }, false);
</script>

 

最近又发现一个问题，Android不能同时播放两个音频? @李猜猜回答：因为ready只会触发一次，所以不能播放多个音频。但是如果需要播放多个音频，其实只要调用一下eixinJSBridge进行包裹即可。 示例代码如下

function playAudio() {
    if (setting.autoplay) {
        if (window.WeixinJSBridge) {
            WeixinJSBridge.invoke(‘getNetworkType‘, {}, function (e) {
                audio.play();
            }, false);
        } else {
            document.addEventListener("WeixinJSBridgeReady", function () {
                WeixinJSBridge.invoke(‘getNetworkType‘, {}, function (e) {
                    audio.play();
                });
            }, false);
        }
        audio.play();
    } else {
        audio.pause();
    }
    return false;
}