圆弧派博客 - 专注于网络技术 - JAVA
https://www.iarc.top/tag/JAVA/
-
使用JS使音乐自动播放的两种方法（不受限于浏览器）
https://www.iarc.top/55.html
2022-12-12T01:40:00+08:00
前言众所周知，网站上声音无法自动播放一直是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()会报错，很多人百度后便会找到两种主流的方法这里就不赘叙浏览器如何设置成自动播放了，因为你总不能让用户访问网站之前让他提前设置好浏览器自动播放的吧方法一//浏览器适用
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('无法找到音乐！');
}构建播放器后，可以在进入页面时缓存，然后自动播放背景音乐，不考虑浏览器。方法二 <script>
var audio=document.createElement('audio');
audio.src='http://music.163.com/song/media/outer/url?id=31365604.mp3';
audio.autoplay=true;
var duration;
duration=audio.duration;//长度单位是秒
function bgm(){
audio.play();//播放
}
window.setInterval("bgm()",duration*1000+1000);
document.head.appendChild(audio);
</script>注意事项 这种方法只对浏览器有效，无法实现APP上自动播放音乐的效果。