微信H5音乐自动播放

masju

已于 2024-09-17 23:58:25 修改

阅读量5.1k

点赞数

分类专栏： JQ学习笔记文章标签：微信微信小程序 html5

于 2022-03-14 17:18:21 首次发布

本文链接：https://blog.csdn.net/masju/article/details/123483384

版权

JQ学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

之前一直用微信的jssdk监听：也就是网上常用的代码

<audio style="display:none; height: 0" id="mymusic" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio>

function audioAutoPlay(id){  
   var audio = document.getElementById(id);  
    audio.play();  
    document.addEventListener("WeixinJSBridgeReady",      function () {  
        audio.play();  
    }, false);  
    
}  
audioAutoPlay('myMusic');

这个方法之前是可用，但是最新发现微信官方修改了游戏规则：
如下：https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01
在这里插入图片描述
所以现在换一个曲线救国的方式监听触摸事件：
//–创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放

document.addEventListener('touchstart', function() {
  document.getElementById('mymusic').play()
})

在2024年建议用下面的方法：
引入howl库，通过监听 window.WeixinJSBridge.invoke(‘getNetworkType’）去处理音乐播放，目前测试安卓、ios 都可以。

const soundBgm = new Howl({
        src: ['__CDN__/assets/myres/tensafe/static/images/mycountry2.mp3'],// 提供多个格式
        autoplay: true, // 是否自动播放，默认为false
        loop: true, // 是否循环播放，默认为false
        volume: 0.5, // 音量大小，范围是0-1，默认为1
        preload: true, // 是否预加载音频，默认为true
        onplay: function () {
            console.log('播放')
        },
        onpause: function () {
            console.log('暂停')
        },
        onstop: function () {
            console.log('停止')
        }
    });
    soundBgm.on('load', () => {
        window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
            soundBgm.play();
        }, false);
    })
    //点击音乐按钮切换播放状态
    function togglePlay() {
        if (soundBgm.playing()) {
            soundBgm.pause();
            $('#audio_btn').removeClass('rotate');
        } else {
            soundBgm.play();
            $('#audio_btn').addClass('rotate');
        }
    }