H5背景音乐解决方案

最新推荐文章于 2024-08-16 08:09:44 发布

Joyce的前端日常

最新推荐文章于 2024-08-16 08:09:44 发布

阅读量2.1w

点赞数 5

分类专栏：前端 html5 文章标签：背景音乐

本文链接：https://blog.csdn.net/joyce_lcy/article/details/79347383

版权

本文详细探讨了H5背景音乐在不同浏览器及移动端的播放问题，包括微信和Safari的自动播放限制，提供了相应的解决方案。内容涵盖自动播放、用户点击播放、离开页面时关闭音乐以及利用Web Storage实现音乐播放状态记忆。

摘要由CSDN通过智能技术生成

前言
背景音乐播放
- 1 自动播放
- 2 点击播放
离开页面关闭音乐
缓存状态
- 1 客户端存储数据方法
- 2 示例
完整解决方案代码

1. 前言

很多H5的项目会用到背景音乐，虽然是很小的一个模块，但是有不少的坑。本文总结了背景音乐的常用情况的解决方案。

在进行下面内容之前，如果你并不了解Audio，可以参考之前的文章：
浅谈Audio

2. 背景音乐播放

我们用最简单的方式来播放音乐：

<!DOCTYPE html>
<html>
<body>
    <audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' autoplay loop>
    </audio>
</body>
</html>

或者:

<!DOCTYPE html>
<html>
<body>
    <audio id='audio' src='http://go.163.com/2018/0209/mengniu/audio/bgm.mp3' loop>
    </audio>
    <script>
        var audio = document.getElementById('audio');
        audio.play();
    </script>
</body>
</html>

结果，在浏览器中可以自动播放，但是在移动端的微信和safari中都无效。

原因：为了节省流量
1、大部分iOS和少部分Android的微信
2、部分Android浏览器和所有iOS系统的Safari
不支持自动播放音频视频

那么，如何解决这样的问题呢？

(1) 自动播放

[1] 微信问题

解决方案：监听WeixinJSBridgeReady和DOMContentLoaded事件

【微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件”WeixinJSBridgeReady”。

发现部分机型，监听DOMContentLoaded和load事件，在回调中也可以播放音乐；
所以，为了保险起见，可以同时监听两个事件，以增强其适用性。】
——摘自 https://www.cnblogs.com/wmhuang/p/5452259.html

[2] Safari问题

解决方案：监听touchstart事件，在用户点击屏幕的时候开始播放音乐

[3] 解决方案代码

//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
   
    function audioAutoPlay() {
   
        var audio = document.getElementById('audio');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
   
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
function audioAutoPlay() {
   
    var audio = document.getElementBy