HTML5 音频无法在移动设备上播放

Posted 2023-02-25

技术标签:

【中文标题】HTML5 音频无法在移动设备上播放【英文标题】：HTML5 audio won't play on mobile devices 【发布时间】：2012-03-30 11:50:19 【问题描述】：

尊敬的 html5 开发人员，

我在处理这个 HTML5 音频时遇到了一些问题……所以让我们开始吧。

ap  = "<audio width='200' height='30' preload='auto' controls autobuffer>";
ap += "<source src='util/blob_audio.php?i=" + w + "&ogg=1' type='audio/ogg' />";
ap += "<source src='util/blob_audio.php?i=" + w + "&mp3=1' type='audio/mpeg' />";
ap += "</audio>";

我在 javascript 中生成它，并且一个方法在需要时返回它。我想我不应该提到那个“w”变量，它是一个参数（YouDon'tSay），它工作得很好。

应该没问题吧？它们出现在台式机上，但在移动设备上出现问题（我在 iPad2、android 3.2.1 平板电脑、Android 2.3.6 智能手机上进行了测试）。

它在 iPad 2 上说：“无法播放音频文件。”在元素中。并且 Droid 显示了默认的音频元素，但没有音量控制，视觉上它说它正在播放 - 从开头跳到结尾。

PHP 标头看起来像这样（在 blob_audio.php 中）（我们将音频作为 blob 存储在数据库中 [不要问我为什么，这不是我的想法]）：

header("Content-Type: audio/ogg"); // this is inside of a condition, this is the "ogg" part of it
header('Content-Length: ' . $length);
header('Content-Disposition: inline');
header('X-Pad: avoid browser bug');
header('Cache-Control: no-cache');

这很好用，因为一切都在桌面上运行。

我在想这些格式（mp3、ogg）可能没有为 ARM 架构 CPU 正确（不支持的编解码器）编码。如果是 mp3，这种情况会发生吗？

一个想法？任何人？ =)

谢谢，本

【问题讨论】：

我们在这里争论你的编码是否在 MP3 中使用 AVR/VBR/CBR。这有关系吗？ 2012 年？ 【参考方案1】：

好的，我们已经弄清楚了。

以下是事实（见下表）：

iStuffs 的问题 -> 我们正在通过安全连接 (HTTPS) 工作。这搞砸了 iShit HTML5 音频处理。他们需要一些“中间证书” - 可能用于身份验证或我不知道 - 在服务器的证书链之间。所以这件事不能通过 SSL 在我们的测试服务器上运行。谁知道...它在您正常部署时起作用。但是，Android 来了，小心！

Android 很有趣，因为（如文档所述 -_O ）Droid 不支持任何低于版本 3.1 的 SSL 媒体格式。这是一场彻头彻尾的“与人性勾结”。我不明白为什么在 21 世纪让一个他妈的系统能够通过安全连接播放任何多媒体/媒体是个问题。这一定又是什么版权法，我又要吐了。

如果你想知道我们为解决这个问题做了什么：

我们发现如果我们真的想让我们的应用程序跨浏览器和“跨设备兼容”（我不知道这是否是正确的命名，但我相信你明白了；）），我们需要从 SSL 下“取出”音频（多媒体/媒体）。

因此，为了简单起见，我们为音频文件（我们现在只需要音频）创建了一个简单的 HTTP 子域（层次结构中的单独文件夹），并通过该子域访问它 + 验证/验证通过脚本文件。所以一切都在 HTTPS 下进行，但多媒体/媒体在 HTTP 上是分开的。

任何时候都可以在每一个他妈的设备上正常工作。我知道这是一个“更大”的解决方案，但对于我们正在测试这些东西的任何设备来说，这是最“可实施”的。

【讨论】：

我必须支持 voy。如果可以的话，我会做两次。 1因为你的回答很有用，2因为你会笑：D【参考方案2】：

你应该使用AAC instead of MP3。

您的内容类型似乎被硬编码为音频/ogg - 您需要确保在请求 MP3/M4A 时设置正确。

【讨论】：

所以 iPad 和 Android 平板都说支持 mp3，但 AAc 仅适用于 iPad。根据使用平板电脑访问 www.html5test.com，mp3 目前仍然存在。抱歉，硬编码的 ogg 东西在条件内。您可以在我的问题“ogg=1”和“mp3=1”的 javascript 部分看到 GET 参数。因此，我们正在检查基于此的格式。【参考方案3】：

没有“自动缓冲”属性。根据文档，以下是可能的属性：

src
crossorigin
preload
autoplay
mediagroup
loop
muted
controls

type 属性给出了媒体资源的类型，以帮助用户代理在获取该媒体资源之前确定它是否可以播放它。如果指定，其值必须是有效的 MIME 类型。某些 MIME 类型定义的 codecs 参数可能需要准确指定资源的编码方式（根据 [RFC4281]）

以下列表显示了如何在type 属性中使用codecs= MIME 参数的一些示例，该参数不仅适用于音频，也适用于视频文件。

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
Theora video and Vorbis audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Theora video and Speex audio in Ogg container
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
Vorbis audio alone in Ogg container
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
Speex audio alone in Ogg container
<source src='audio.spx' type='audio/ogg; codecs=speex'>
FLAC audio alone in Ogg container
<source src='audio.oga' type='audio/ogg; codecs=flac'>
Dirac video and Vorbis audio in Ogg container

更多详情请见http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element。

【讨论】：