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

admin管理员组

文章数量:1530085

众所周知，声音无法自动播放这个在 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可能运用的不多，欢迎大牛以及有个人见解的不妨提出来我们一起讨论讨论

本文标签： 浏览器不受要对不需背景音乐