背景音乐自动播放（不受浏览器的限制，不需要对浏览器进行交互和修改） |
您所在的位置：网站首页 › 如何浏览器加速播放音乐 › 背景音乐自动播放（不受浏览器的限制，不需要对浏览器进行交互和修改） |
|
众所周知，声音无法自动播放这个在 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可能运用的不多，欢迎大牛以及有个人见解的不妨提出来我们一起讨论讨论 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |