HTML5 音频标签在 Android 中不起作用 - 在 JS 中创建 Chrome 时？答案

【问题标题】：HTML5 audio tag does not work in Android - Chrome when created in JS?HTML5 音频标签在 Android 中不起作用 - 在 JS 中创建 Chrome 时？
【发布时间】：2016-02-24 06:41:23
【问题描述】：

我使用的是 .mp3 文件，.mp3 文件在直接查看以及使用 HTML5 音频标签嵌入时播放正常，但是在 JS 中创建 HTML5 音频标签时它不会播放！（很奇怪）

我在任何其他浏览器/设备中都没有这个问题，例如桌面 - Chrome 可以完美运行。

sound = document.createElement('audio');
sound.setAttribute('src', 'sound.mp3');
sound.play();

我测试了 sound.canPlayType('audio/mpeg') 并且结果为 true（因此它受支持）。

也许 Android - Chrome 中存在错误？（是最新版本）

【问题讨论】：

或者你应该让浏览器在播放之前加载源代码。如果可能，请提前创建audio 元素。监听由audio 元素触发的canplay 或canplaythrough 事件，以了解何时有足够的数据开始播放。
也许移动 Chrome 不允许您以编程方式触发播放？您是否在用户触发的事件上执行此操作？也许还可以尝试将元素添加到 DOM。
@AlexanderO'Mara 我知道。但这在这里没有任何意义，OP 也测试了这个假设。如果audio 不能以编程方式播放，那就是这样（但也请检查我的假设）。您可以尝试使用 Web Audio API 作为替代方案。它的代码多一点，但功能也更强大。
@magreenberg 我们已经知道，当audio 元素是 HTML 的一部分时，音频可以正常播放。所以它不可能是网络的东西。
Just found this, it's intended by google! :(

标签： javascript html html5-audio

【解决方案1】：

看起来这是一个预期的功能，它不仅限于 Chrome 浏览器。需要用户交互才能播放媒体元素。

Blink 和 WebKit 有一个设置要求“用户手势”来播放或暂停音频或视频元素，该设置在 Opera for Android、Chrome for Android、默认的 Android 浏览器、Safari for iOS 和可能的其他浏览器中启用.这是有道理的，因为移动设备在公共场所和床上使用，来自随机网站的未经请求的声音可能会令人讨厌。此外，自动播放视频广告会浪费带宽。 Block Quote from 'blog.foolip.org'

来自其他用户的重复话题

Autoplay audio on mobile safari

How can I autoplay media in ios 4.2.1

Autoplay audio with ios 5 workaround?

当前状态

开发者已请求删除“mediaPlaybackRequiresUserGesture”，该请求已被审核并拒绝（目前）。 "We're going to gather some data about how users react to autoplaying videos in order to decide whether to keep this restriction."

经过进一步检查，我发现了这个......

“我误解了围绕此主题的讨论结果（删除 mediaPlaybackRequiresUserGesture）。我们需要保留此代码，以免在收集有关此功能的数据时破坏 google.com。”

Google.com 依赖于被禁用的功能，否则它会中断（他们没有说它会中断什么）。

Original Bug Report

【讨论】：

天哪，好地方！有点痛苦，但我理解为什么谷歌可以添加这个限制。从消费者 PoV 来看这很好，但对于开发人员来说，这意味着更多的工作。
@MrLister 我更新了我的答案。这看起来够完整吗？

【解决方案2】：

并非每个平台上的每个浏览器都可以播放 mp3 音频格式。通常，我建议您在音频元素中提供两个 <source> 元素，一个提供 mp3 格式，另一个提供 ogg vorbis 格式。

您可以在这里阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

【讨论】：

我很确定移动 Chrome 确实支持 MP3，所以这可能不是当前的问题。
我很欣赏这个 Simon，但是在 Android - Chrome 上，我可以直接查看 .mp3 文件而没有问题。我还可以毫无问题地使用 HTML5 音频标签嵌入 .mp3 文件。 sound.canPlayType('audio/mpeg') 也产生 true。所以所有这些都表明它应该起作用。 :(
@AlexanderO'Mara 同意您的观点与我的上述发现一致。
好的，谢谢 cmets。在我引用的链接中，Chrome + Android 上有一个问号，所以我认为可能就是这种情况。

【解决方案3】：

好的，既然我们知道它不适用于audio，剩下的唯一途径就是切换到 Web Audio API。您需要将 mp3 加载到 ArrayBuffer 中（例如使用 XHR），然后将其传递给 decodeAudioData 方法，该方法会为您提供一个音频缓冲区，您可以从 AudioBufferSourceNode 随意播放。

【讨论】：

会看一下 - 谢谢，虽然初步检查的文档似乎非常压倒性！

【解决方案4】：

尝试将其附加到文档正文中。

document.body.appendChild(sound);

虽然移动设备可能不会自动播放音频或视频。如果您的目标是移动设备，则自动播放被认为是不好的做法，因为它会消耗带宽。所以可能值得考虑添加控件。

sound.setAttribute('controls', 'true');

【讨论】：

试过没有成功，开始想也许是Android-Chrome不允许程序化播放？（如果这有意义的话）。
可能是为了节省带宽。
@Stone 如果是这种情况，我希望可以加载和/或播放用户事件，例如触摸。