高版本chrome,Firefox不允许自动播放声音,视频的话可以muted静音后自动播放。声音需要和用户交互后如点击页面后才会播放。可以给document添加click事件执行播放操作,不过不点击就没搞头了。。鼠标移动事件不算交互动作,调用play会出错。
有帮助或启发麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
<audio src="music.mp3" loop autostart id="music" controls></audio>
<script>
function playMusic() {
music.play();//移除事件
document.removeEventListener('click', playMusic);
}
document.addEventListener('click', playMusic);
</script>
在火狐下用window.AudioContext+XHR加载可以播放,chrome 94+以上无效,其他版本的chrome知道能否生效。总的来说自动播放通过浏览器不现实,题主不用研究了。
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
let audioData, source;
function audioAutoPlay(url) {
let request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function() {
console.log('音频文件加载完成');
audioCtx.decodeAudioData(request.response, function(buffer) {
console.log('对音频解码完成');
audioData = buffer;
playAudio()
},
function(e) { console.log(e); });
};
request.send();
}
function playAudio() {
source = audioCtx.createBufferSource();
source.buffer = audioData;
source.connect(audioCtx.destination);
//source.loop = true;
source.start();
source.onended = function (h) {
console.log(h);
}
}
function stopAudio() {
source.stop();
}
audioAutoPlay("../唐人街.mp3");
</script>
注意:由于用的是XMLHttpRequest加载的音频文件,不支持跨域加载。
<input type="button" value="play" onclick="playAudio();" />
<input type="button" value="stop" onclick="stopAudio();" />
</body>
</html>
贴代码出来看看,还有路径是否正确?
因为现在谷歌浏览器默认不支持自动播放,所以你的属性失效了,可以写个点击事件然后里面加audio.play