通过预处理流式传输 MP3答案

【问题标题】：Streaming MP3 with pre-processing通过预处理流式传输 MP3
【发布时间】：2013-12-04 12:07:03
【问题描述】：

我想知道是否有办法从服务器获取流式音频数据（mp3、flac、任意编码的任意数据块）、处理它并在第一个块之后开始播放？

背景：我们所有的数据都存储在压缩块中，并由 LAMP 环境提供数据。解压缩和重新组装是在客户端完成的 xhr-downloads、indexeddb、文件句柄和/或 chromefs。目前所有可用的音频/视频功能需要音频完全下载（否则 decodeAudioData 失败）或需要不给我机会处理传入数据的源 URL 客户端。

我正在寻找一种解决方案，将我的处理压缩到浏览器“内置”流/缓存/解码功能（例如音频/视频标签）中。我不想在服务器端预处理任何东西，我不想要 flash/java-applet，我想避免在客户端对齐数据（例如处理 mp3）

问题：是否可以动态“增长” bloburl 指向的存储？换句话说：创建一个文件句柄/文件条目，生成一个 blobURL，将其输入音频标签并使用更多数据增长文件？

还有其他想法吗？

米迦勒

补充：好吧，经过又一天毫无结果的尝试，我必须确认在处理流式/分块 mp3|ogg 数据时存在两个问题：

1) decodeAudioData 对输入的内容过于挑剔。即使我预先对齐 ogg-audio（在“OggS”边界处分割），我也无法解码第二个块。

2) 即使我能够解码这些块，我将如何在不设置计时器、开始位置或其他令人头疼的弯路的情况下继续播放它们？也许 webAudioAPI 开发者应该看看 aurora/mp3 ？

已添加：很抱歉，我在开玩笑。但是我最新的从麦克风录制音频的实验也不是很有希望。 400K WAV 几秒钟的录音？我花了几分钟来写下我使用 webAudioAPI 的经验并添加了一些建议 - 从编码人员的角度来看：http://blog.michaelamerz.com/wordpress/a-coders-perspective-on-the-webaudioapi/

【问题讨论】：

你不能在第一个块之后开始播放。每种格式都有自己的框架。开始播放之前需要多少数据完全取决于编解码器和容器格式。除此之外，您还需要 WebAudio API。
感谢 Brad - 我知道这一点，尽管 aurora.js 和 mp3.js 非常乐意在第一块之后开始播放。我们的块大小在 100 到 300 KB 之间。使用 Webaudio，我无法将任意块输入 decodeAudioData，因为如果数据未对齐，它将失败。我想使用 WebAudioApi - 但只要解码器没有做它应该做的事情，它就不是一个选项:)
您需要自己解码编解码器并将其提供给 WebAudio API。 WebAudio API 是使用 JavaScript 将音频写入声音设备的唯一真正方法。
对不起，布拉德，但这很愚蠢。如果浏览器内置了所有编解码器，为什么我需要自己解码常见的音频？如果“decodeAudioData”能够更强大地自行解码，难道不是更有意义吗？我并不是在反对 WebAudioAPI——但如果它不能像 MP3 或 OGG 这样的普通音频流式传输，那就没有任何意义了。
嗯，WebAudioAPI 提供了 decodeAudioData 来做到这一点：将已知的音频类型解码为 PCM。 aurora/mp3 能够正确对齐任意块 - 为什么不能 decodeAudioData？我不想控制自己的缓冲或其他任何东西，我只想使用可用的东西：mp3|ogg|任何数据块。如果需要的只是 decodeAudioData 中内置的更多“大脑”，那么考虑编解码器不应该是 javascript 开发人员的工作。

标签： html streaming html5-video audio-streaming html5-audio

【解决方案1】：

结帐https://github.com/brion/ogv.js。 Brion 的项目分块加载 .ogv 视频并通过 WebAudio API 和 Canvas 将原始数据输出回屏幕，以文件本身的原始 FPS/时间播放。

代码库中有一个 StreamFile 对象，用于处理数据的分块加载、缓冲和读出，以及如何组装数据以通过 WebAudio 播放的示例。

实际上，我直接给 Brion 发了电子邮件寻求一点帮助，他在一小时内回复了我。它不能完全针对您的用例而构建，但元素就在那里，我强烈推荐 Brion，他对文件格式、编码和播放非常了解。

【讨论】：

【解决方案2】：

您不能为此使用<audio> 标签。但是，您可以使用什么

Web Audio API - 允许您在 JavaScript 中动态构建音频流
WebRTC - 可能需要在服务器端进行流式数据预处理，不确定

缓冲区是可回收的，因此您可以丢弃已播放的音频。

您如何加载数据（XHR、WebSockets、分块文件下载）并不重要，只要您可以将原始数据保存到 JavaScript 缓冲区即可。

请注意，没有浏览器可以解码的通用音频格式，您使用 MP3 的里程可能会有所不同。 AAC（mpeg-4 音频）得到更多支持，并且具有最佳的网络和移动覆盖范围。您还可以在 Firefox 中使用纯 JavaScript 解码 AAC：http://jster.net/library/aac-js - 您也可以在纯 JavaScript 中解码 MP3：http://audiocogs.org/codecs/mp3/

请注意，localStorage 仅支持每个源 5 MB 数据而无需额外的对话框，因此这严重限制了在客户端存储音频。

【讨论】：

谢谢米科。但是，WebAudioApi 在解码任意分块数据方面存在问题，因为如果文件尚未完全下载或至少已在客户端对齐，则 decodeAudioData 会失败。我用 aurora.js 和 mp3.js 做了一些测试，但它不是很可靠，如果浏览器本身完全能够做到这一点，那么在 JS 中解码音频流没有太大意义。