<audio>标签已经设置了自动播放,为什么没有反应?

高版本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