微信游览器,解决安卓和ios自动播放音乐

微信游览器,解决安卓和ios自动播放音乐,第1张

 弄巧成拙,解决了安卓和ios不可自动播放的问题,需要借助插件,这是目前找到的方法,如还能改进或有更好的方法还请分享。

html代码,用于苹果的音乐播放
插件引用



因为安卓无法用WeixinJSBridgeReady播放,发现之前有一个H5小游戏,在pixi-sound的借助下可以自动播放。pixi-sound需要pixi才可以使用。

这里送上传送门:
https://pixijs.download/v5.3.9/pixi.min.js下载pixi,pixi是H5游戏渲染引擎。
Release v2.1.2 · pixijs/sound · GitHub 用的这个版本,太新的版本不兼容
GitHub - pixijs/sound: WebAudio API playback library, with filters. Modern audio playback for modern browsers. 可上pixi-sound git查看使用方法,里面有demo可以下载。

// 判断机型是否是安卓机型,不然就是苹果机型
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var music = $('#music')[0];// html的audio获取元素

var sound = PIXI.sound.Sound.from({// 用pixi-sound载入音乐,用于安卓
    url: 'music.mp3',
    loop: true
});
$('.music-start').on('click', function() {//停止音乐
    $(this).addClass('displayNone');// 对于class的左右可以无视
    $('.music-stop').removeClass('displayNone');
    if(isAndroid) {
        // 安卓
        sound.stop();
    } else {
        // ios
        music.pause();
    }

})
$('.music-stop').on('click', function() {//播放音乐
    $(this).addClass('displayNone');// 对于class的左右可以无视
    $('.music-start').removeClass('displayNone');
    if(isAndroid) {
        // 安卓
        sound.play();
    } else {
        // ios
        music.play();
    }
})
//初始化执行
if(isAndroid) {
    // 安卓
    sound.play();
} else if(isiOS) {
    // ios
    music.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);
}

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1320915.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存