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

最新推荐文章于 2024-01-10 20:42:07 发布

掌心一点微笑

最新推荐文章于 2024-01-10 20:42:07 发布

阅读量4.4k

点赞数

文章标签：手机浏览器 mp3 audio

本文链接：https://blog.csdn.net/cyberHerman/article/details/84953849

版权

本文介绍了如何在手机浏览器中播放mp3音乐，特别是在Chrome浏览器中的处理方式。针对Chrome的特殊性，需要调整Autoplay policy设置。同时，为了在页面返回后停止音乐播放，提供了相应的JavaScript代码处理方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:本来是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);