html - 音频标签自动播放不适用于移动设备

Question

我正在使用此代码，当我看到controls时我发现自动播放不起作用。

<audio autoplay="true" src="music/lathe_di_chadar.mp3" type="audio/mp3" loop></audio>

它在移动设备上不起作用，但在网站上工作得很好。谁能告诉我这有什么问题吗？

感谢并非常感谢

Answer 1

现在是 2020 年了

请注意(出于以下原因？)Chrome 已更改其自动播放政策(请参阅 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes )，因此您现在必须:

• resume() 用户与页面进行一些(任何)交互后的音频上下文
• 或“排名靠前”(即相信 Chrome 不会根据用户和世界的行为默认停止音频)
• 或者(据我所知)用户必须位于源 A，然后单击指向同一源 A 的链接，并且 A 的新页面可以自动播放内容。

<小时/>

您可以使用 AudioContext 播放声音API 并从任何 ArrayBuffer 获取源代码(即:从 XMLHttpRequest 或 File)

    window.addEventListener('load', function () {
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var source = audioCtx.createBufferSource();
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'audio-autoplay.wav');
        xhr.responseType = 'arraybuffer';
        xhr.addEventListener('load', function (r) {
            audioCtx.decodeAudioData(
                    xhr.response, 
                    function (buffer) {
                        source.buffer = buffer;
                        source.connect(audioCtx.destination);
                        source.loop = false;
                    });
            source.start(0);
        });
        xhr.send();
    });

Live example

适用于 Chrome 和 Firefox(移动版和桌面版)

重要说明

值得一提的是，IMO，这个“技巧”实际上可以被视为浏览器错误，并且如果浏览器认为这会破坏用户体验/成为广泛使用的烦恼(如广告)，则可能不再起作用。 .

还值得一提的是，至少在我的手机和 FF 54 上，即使您的手机静音，声音仍然会播放......

还值得一提的是，用户可以通过浏览器的常用选项或更高级的 about:config 设置 autoplay 行为以满足自己的愿望和需求页面(autoplay 行为由 Firefox 的 media.autoplay.enabled 和 media.block-autoplay-until-in-foreground 首选项设置)。

因此，无论您如何执行，强制音频自动播放都是一个糟糕的用户体验想法。