手机浏览器播放mp3等音乐(chrome特殊)

需求:本来是jsp上播放的mp3,后来需求变动,手机上浏览器也要播放,所以修改如下:

(jsp播放音乐 看上篇文章 https://blog.csdn.net/cyberHerman/article/details/84953776)

添加新的js:

document.addEventListener('touchstart', function () {
    function autoPlay() {
        var myAuto = document.getElementById('music');
        myAuto.play();
    }
    autoPlay();
});

但是手机上的chrome浏览器很特殊,就是播放不了,在网上找到的解决办法是:

在浏览器输入  chrome://flags/#autoplay-policy 

第一个选项 Autoplay policy  设置为 no user gesture is required

就可以播放.

但是所有浏览器都有一个共性,就是页面返回之后,音乐还在播放,也就是手机屏幕只要不在当前页面 就要停止音乐播放,代码入下:

var hiddenProperty = 'hidden' in document ? 'hidden' :
    'webkitHidden' in document ? 'webkitHidden' :
        'mozHidden' in document ? 'mozHidden' :
            null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (document[hiddenProperty]) {
        console.log('页面非激活');
        //关闭音乐
    }else{
        console.log('页面激活')
        //判断是否开启音乐
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);