在HTML5中播放实时音频流 - Chrome中的MediaSource错误

Question

我需要一种使用HTML5（主要是在谷歌浏览器中）播放实时音频流的方法，所以我尝试使用以下内容：

<audio>
    <source src="my-live-stream.ogg" type="audio/ogg">
</audio>

虽然这对现场直播有效，但播放时似乎有一个非常大的，无法控制的延迟/缓冲约30秒左右。

我需要延迟几秒或更短，所以此方法不起作用。

作为替代方案，我尝试通过WebSocket连接发送音频作为1秒的单个音频文件，然后将其附加到SourceBuffer并使用Media Source Extensions在音频元素中播放。

在尝试了多种格式后（ MediaSource.isTypeSupported 似乎在音频支持方面相当有限），我使用了WebM容器中的Vorbis音频流，这听起来很完美，没有听得见的差距。其他格式的效果不佳，因为它们需要无间隙 - 例如MP3和AAC最终在每个1秒段之间留有微小的可听间隙。

虽然这看起来有效，但在查看chrome://media-internals时，会反复出现以下错误：

00:00:09 544    info    Estimating WebM block duration to be 3ms for the last (Simple)Block in the Cluster for this Track. Use BlockGroups with BlockDurations at the end of each Track in a Cluster to avoid estimation.
00:00:09 585    error   Large timestamp gap detected; may cause AV sync to drift. time:8994999us expected:9231000us delta:-236001us
00:01:05 239    debug   Skipping splice frame generation: not enough samples for splicing new buffer at 65077997us. Have 1us, but need 1000us.

最终播放停止，就像音频元素上的暂停按钮一样。它仍然显示暂停而不是播放按钮，但当前时间停止前进：

按暂停按钮，然后按下替换它的播放按钮不会再次开始播放，但是手动向前拖动位置滑块会继续播放。

我已尝试设置sourceBuffer.mode = 'sequence';，但这似乎没有帮助。

是否需要更改音频文件的编码方式，或者在JavaScript中如何播放它们以解决此问题？

其他详情：

1. 使用Windows上的FFmpeg将音频流编码为1秒的WebM / Vorbis文件。
2. 在浏览器中使用后台工作程序来接收音频片段并将它们传递给主页面线程，后者将它们附加到音频流。否则播放会冻结。

源代码：

• 网络播放器：https://github.com/SamuelFisher/WebSocketAudio
• WebSocket服务器和编码器：https://github.com/SamuelFisher/WebSocketAudioServer