&&youyou 2021-10-15 13:11 采纳率: 100%
浏览 81
已结题

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

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-10-15 15:30
    关注

    高版本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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 10月15日
  • 已采纳回答 10月15日
  • 创建了问题 10月15日