解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题

最新推荐文章于 2023-06-27 18:55:39 发布

m0_67401134

最新推荐文章于 2023-06-27 18:55:39 发布

阅读量2.6k

点赞数 2

分类专栏：前端 html 文章标签：缓存前端 javascript

本文链接：https://blog.csdn.net/m0_67401134/article/details/123220845

版权

本文介绍了在H5项目中，如何处理微信安卓浏览器对vedio标签自动播放的限制。通过利用web video api，提供了解决方案和使用示例，帮助开发者实现背景音乐的正常播放。

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

背景

制作的H5项目，使用vedio标签，利用wx.getNetworkType来自动播放背景音乐。
但是安卓的vedio自动播放被微信浏览器限制了。

解决方案

采用web vedio api
细节解释：
web vedio api MDN

伸手

/**
 * @author ccbbs
 * @file 解决安卓webview自动播放背景音乐的问题
 */
function BGMAutoPlayMgr/* solveAndroidBGMAutoplay */(url) {
    this.audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();
    this.sourceNode = null;
    this.buffer = null;
    this.isPlayingBGM = false;
    this.toggleBGM = function () {
        if (typeof this.sourceNode == 'object') {
            if (this.isPlayingBGM) {
                this.sourceNode.stop();
                this.isPlayingBGM = false;
            } else this._playSourceNode();
        }
    }
    t