移动端浏览器无法自动播放音乐问的解决方法

用户年度总结

在2019年尾 公司要做一个用户年度总结的小需求 需要加入背景音乐 任务交给了我 本以为简单 由于是在APP内嵌h5 所以产生了一系列的问题

1. 在APP中进入页面时 无法自动播放音乐
2. 在微信内置浏览器中无法自动播放
3. 在ios系统中 Safari中也需要手动触发播放
4. 当页面隐藏后还在播放音乐

解决方法

• 由于在APP内部是不用允许自动播放的跟产品讨论后改为用户手动触发

// 监听用户的touchStart事件来触发音乐的播放
document.addEventListener('touchstart',function() {
    // 里面进行audio的操作
    //  audio.play()
},false)

• 在微信中这需要监听WeixinJSBridgeReady

// 在微信中 想要自动播播放则需要监听WeixinJSBridgeReady 
document.addEventListener('WeixinJSBridgeReady',function() {
     // 里面进行audio的操作
    //   audio.play()
},false)

• 在其它不受限制的浏览器 这需要监听 DOM加载完毕事件即可

document.addEventListener('load',function() {
    // 里面进行audio的操作
    // audio.play()
},false)

• 当页面隐藏后还在播放音乐 需要监听document的visibilitychange事件

document.addEventListener('visibilitychange',function() {
    // 用户离开当前页面
    if(this.visibilityState === 'hidden'){
    //  当页面的状态为一隐藏时候 
    //  audio的状态可以设置为暂停  以及播放的动画和样式
    }
    // 当用户回到当前的页面
    if(this.visibilityState === 'visible') {
//  当页面的状态为一显示时候 
    //  audio的状态可以设置为播放  以及播放的动画和样式
    }
})