Js自动播放HTML音乐（不受浏览器限制，无需先与浏览器交互，无需对浏览器进行修改）

众所周知，声音无法自动播放一直是IOS/Android上的惯例。桌面版Safari也在2017年第11版宣布禁止带声音的多媒体自动播放功能。随后2018年4月发布的Chrome 66正式关闭了声音的自动播放，这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。

而通过网上搜索来解决这个问题，大部分都会提到使用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属性，静音播放即可 首先说一下方法一。当前的谷歌浏览器已经删除了自动播放策略选项，所以当你进入谷歌浏览器进行设置时，是找不到这个选项的。而且作为网页的背景音乐，你还要把效果展示给别人看。所以，改变浏览器选项还不够成熟。先说第二种方法。如果作为背景音乐播放，可以更改静音属性，达到自动播放的效果。自动播放是可以的，但是这里用户需要的是背景音乐，而且是音频文件，静音属性无法达到这个效果。然后有人问，既然谷歌Chrome的背景音乐不能自动播放，究竟怎么解决呢？ 这里使用Audio 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可能用的不多，欢迎大牛和有个人见解的人站出来和我们讨论。

本文共 614 个字数,平均阅读时长 ≈ 2分钟