Html 音频标签自动播放不适用于移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34837930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Audio Tag Autoplay Not working in mobile
提问by Lakshya
i am using this code and when i see the controlsi see the autoplay is not working.
我正在使用此代码，当我看到controls我看到自动播放不起作用。
<audio autoplay="true" src="music/lathe_di_chadar.mp3" type="audio/mp3" loop></audio>
<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?.
它不适用于移动设备，但在网站上运行良好。谁能告诉我这里面的问题？
Thanks and well Appreciated
谢谢和赞赏
采纳答案by Xenos
Now, it's2020
现在是2020
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:
请注意（出于以下原因？）Chrome 已更改其自动播放政策（请参阅https://developers.google.com/web/updates/2017/09/autoplay-policy-changes），因此您现在必须：
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.
resume()某些（任何）用户与页面交互后的音频上下文- 或者被“高度评价”（即相信 Chrome 不会根据用户和世界的行为默认停止音频）
- 或者（据我所知）用户必须在来源 A 上，然后单击指向相同来源 A 的链接，并且 A 的新页面可以自动播放内容。
You can play a sound using the AudioContextAPI and taking the source from any ArrayBuffer(ie: from a XMLHttpRequestor a File)
您可以使用AudioContextAPI播放声音并从任何来源ArrayBuffer（即：来自 aXMLHttpRequest或 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();
});
Works on Chrome and Firefox both mobile and Desktop
适用于移动和桌面的 Chrome 和 Firefox
Important notes
重要笔记
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).
值得一提的是，IMO，这个“技巧”实际上可以被视为浏览器错误，如果浏览器认为这会破坏用户体验/成为广泛使用的烦恼（如广告），则可能在任何时候都不再有效。
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...
还值得一提的是，至少在我的手机和FF 54上，即使您的手机静音，声音仍然会播放......
It's also also worth mentionning that user might set the autoplaybehavior to fit their wishes and needs either through the browser's usual options or through the more-advanced about:configpage (autoplaybehavior is set by Firefox's media.autoplay.enabledand media.block-autoplay-until-in-foregroundpreferences).
还值得一提的是，用户autoplay可以通过浏览器的常用选项或通过更高级的about:config页面（autoplay行为由 Firefoxmedia.autoplay.enabled和media.block-autoplay-until-in-foreground首选项设置）来设置行为以满足他们的愿望和需求。
So forcing the audio autoplayis a bad UX ideano matter how you do it.
所以无论你怎么做，强制音频autoplay都是一个糟糕的用户体验想法。
回答by Ender Kaya
There is no way to get autoplay working in mobile browsers. (This is not allowed)
没有办法让自动播放在移动浏览器中工作。（这是不允许的）
But some tricks do this thing.
但是一些技巧可以做到这一点。
Click on the links below to view some tricks
单击下面的链接查看一些技巧
Autoplay audio on mobile safari
