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 首选项设置)。

所以强制音频自动播放是一个糟糕的用户体验想法，无论你怎么做。