在android/iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

Posted 2023-05-07

参考技术A 度娘网上找了很久，都说不支持音频的自动播放，我也尝试了很久，差点就放弃了， 最终在google上搜索到了解决方案，所以就记录一下。

参考文章

解决在 iOS 微信浏览器中无法自动播放 HTML5 audio

解决在 iOS 微信浏览器中无法自动播放 HTML5 audio

问题场景

最近在同事在写一个微信页面时发现在ios中不能自动播放背景音乐，也就是autoplay 在ios 中失效，但是在安卓中可以，于是开始了度娘之旅，发现苹果为了用户着想，禁止了Autoplay和JS “onload” 加载播放。但是客户却是需要上述效果，那该如何解决呢？

解决方法

一、引入微信weixin-1.0.0.js

        wx.config(
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        );
        wx.ready(function() 
            document.getElementById('audio').play();
        );