您现在的位置是:首页 > Javascript
当前栏目
Js自动播放HTML音乐(不受浏览器限制,无需先与浏览器交互,无需对浏览器进行修改)
2023-02-18 16:47:28 时间
众所周知,声音无法自动播放一直是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:
- 进入到 chrome://flags/#autoplay-policy
- 找到Autoplay policy选项,设置为Setting No user gesture is required
- 重启:Relaunch Chrome
Two:
- 直接在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分钟
相关文章
- Vue 3 + Typescript + Vite 基于jsplumb流程设计和流程流转
- js setTimeout 错误捕获
- 【JS ES6】了解学习set类型和weakset类型
- 【JS ES6】了解Symbol类型
- c++混合js编程
- js解决单线程之路 - worker的使用分析
- 快速了解JSON及JSON的使用
- JavaScript刷LeetCode之双指针技巧(下)
- 用javascript分类刷leetcode之递归&分治(图文视频讲解)
- JavaScript刷LeetCode之-双指针技巧(上)
- 用javascript分类刷leetcode23.并查集(图文视频讲解)
- 将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩
- 论文解读(node2vec)《node2vec Scalable Feature Learning for Networks》
- 一起手写JS函数的call、apply、bind
- 记录下最近开发中fastjson的坑-fastjson出现json解析异常
- JSON语法格式
- iOS小技能:WKWebView与JS的交互
- java小技能:JWT(json web token)认证实现
- 请你说一说Java 和 JavaScript的区别?
- requests.post 方法 json 和 data 参数的区别