音频标签自动播放不适用于移动设备 [英] Audio Tag Autoplay Not working in mobile

问题描述

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

i am using this code and when i see the controls i see the autoplay is not working.

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

它不适用于移动设备，但在网站上运行良好.谁能告诉我这里面的问题?

and its not working in the mobile devices and very well working in website. Can anyone tell me the problem in this?.

谢谢，不胜感激

推荐答案

现在是 2020 年

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

Note that (for the below reason?) Chrome has changed their autoplay policy (see https://developers.google.com/web/updates/2017/09/autoplay-policy-changes ) so you now must either:

• resume() 一些(任何)用户与页面交互后的音频上下文
• 或者被高度评价"(即相信 Chrome 不会根据用户和世界的行为默认停止音频)
• 或者(据我所知)用户必须在源 A 上，然后单击指向相同源 A 的链接，并且 A 的新页面可以自动播放内容.

• resume() the audio context after some (any) user interaction with the page
• or be "highly ranked" (ie trust Chrome not to stop audio by default based on user's and world's behavior)
• or (as far as I get it) user must be on origin A then click a link to same origin A and that new page of A can autoplay things.

您可以使用 AudioContext API 并从任何 ArrayBuffer(即:来自 XMLHttpRequest 或 File)获取源

You can play a sound using the AudioContext API and taking the source from any ArrayBuffer (ie: from a XMLHttpRequestor a 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();
    });

实例

适用于移动和桌面的 Chrome 和 Firefox

Works on Chrome and Firefox both mobile and Desktop

重要说明

值得一提的是，IMO，这个技巧"实际上可以被视为浏览器错误，如果浏览器认为这会破坏用户体验/成为广泛使用的烦恼(如广告)，则可能在任何时候都不再有效.

It's worth mentioning, IMO, that this "trick" can actually be considered as a browser bug, and might no longer work at any time if browser decide that this breaks user experience/becomes a widely-used annoyance (like ads).

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

It's also worth mentioning that, at least on my mobile and FF 54, the sound will still be played, even if your mobile is muted...

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

It's also also worth mentionning that user might set the autoplay behavior to fit their wishes and needs either through the browser's usual options or through the more-advanced about:config page (autoplay behavior is set by Firefox's media.autoplay.enabled and media.block-autoplay-until-in-foreground preferences).

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

So forcing the audio autoplay is a bad UX idea no matter how you do it.

这篇关于音频标签自动播放不适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！