背景音乐自动播放（不受浏览器的限制，不需要对浏览器进行交互和修改）

港控/mmm° 2023-07-18 14:28 2阅读 0赞

众所周知，声音无法自动播放这个在 IOS/Android 上面一直是个惯例，**桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放**，也就是说 audio autopaly  和 video autoplay 在桌面版浏览器也将失效。

而且网上搜索如何解决这个问题，大部分会提到用javascript原生中的play()去解决，但是，当你运行时，你会发现Chrome下调用play后抱错：

DOMException: play() failed because the user didn’t interact with the document first.

但是，如果你想的是将音频当作背景音乐来播放时，当页面加载时音频文件就会自动响起，这个时候，用户是没有与页面进行数据交互的，所以play()会报错，很多人百度后便会找到两种主流的方法

One：
    1. 进入到 chrome://flags/#autoplay-policy
    2. 找到Autoplay policy选项，设置为Setting No user gesture is required
    3. 重启:Relaunch Chrome
    
    Two：
    1. 直接在video标签中属性muted属性，静音播放即可

首先来说方法一吧，目前的谷歌浏览器，已经将Autoplay policy选项进行删除了，所以你进入谷歌浏览器进行设置，是无法找到该选项的，而且作为网页背景音乐，你是要将效果给他人呈现出来的，所以，改动浏览器的选项是不够成熟的表现；再来说说方法二，如果你当作背景音乐进行播放，那么采用改变muted属性来达到自动播放效果的实现，自动播放是可以的，但是在这里用户需要背景音乐，而且是音频文件，muted属性是无法实现这个效果的。那么就有人问了，既然谷歌浏览器背景音乐无法自动播放，到底如何解决呢？

**这里采用音频API的AudioContext来自我构建一个播放器**

//浏览器适用       
     contextClass = window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
     try {
           var context = new contextClass();
           var source = null;
           var audioBuffer = null;
           function stopSound() {
                if (source) {
                    source.stop(musics); //立即停止
                 }
          		}
          function playSound() {
                    source = context.createBufferSource();
                    source.buffer = audioBuffer;
                    source.loop = true;
                    source.connect(context.destination);
                    source.start(0); //立即播放    
                }
          function initSound(arrayBuffer) {
                    context.decodeAudioData(arrayBuffer, function (buffer) { //解码成功时的回调函数
                        audioBuffer = buffer;
                        playSound();
                    }, function (e) { //解码出错时的回调函数
                        console.log('404', e);
                    });
                }
          function loadAudioFile(url) {
                    var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
                    xhr.open('GET', url, true);
                    xhr.responseType = 'arraybuffer';
                    xhr.onload = function (e) { //下载完成
                        initSound(this.response);
                    };
                    xhr.send();
                }
                //这里用来存储背景音乐的路径
                loadAudioFile('audio/music.flac');
     } catch (e) {
          console.log('无法找到音乐！');
     }

当你构建了一个播放器后，你便可以不受浏览器的限制，在你进入页面时进行缓存然后自动播放背景音乐。

**注意事项**

*  该方法仅对浏览器有效，无法在APP上实现音乐自动播放效果
 *  音频API的AudioContext可能运用的不多，欢迎大牛以及有个人见解的不妨提出来我们一起讨论讨论