如何从手动创建的音频流中流式传输音频？ （客户端）

Question

一切都在前端完成。

我的目标是能够实时创建音轨，并立即为用户播放。该文件大约需要 10 分钟。但是，文件非常简单，大多是无声的，周围散落着一些声音片段（声音片段为 2kb）。所以生成数据（原始字节）的过程非常简单，要么写入 2kb 的声音片段，要么将 n 数量的 00 放置为静音。就这样10分钟。但不是完全生成整个文件，然后播放它，我想流式传输音频，理想情况下我会在播放音频时生成越来越多的文件。它将防止用户单击播放和音频开始播放之间的任何明显延迟。创建文件的过程可能需要 20 毫秒到 500 毫秒不等，根据用户输入创建不同的文件。

唯一的问题是：我不知道该怎么做。我已经阅读了有关使用 Web 套接字的想法，但这似乎数据来自服务器，当 JavaScript 可以轻松地自行生成音频数据时，我认为没有理由为此打扰服务器。

在过去的几个小时里，我一直在研究和试验Web Audio API 和Media Streams API，我一直在转圈，我完全被它弄糊涂了。我开始认为这些 API 旨在用于从用户麦克风或网络摄像头收集数据，而不是直接从可读流中提供数据。

我想做的事可能吗？是否可以使用 MediaStreamAudioSourceNode 之类的方法来实现，或者还有其他我没有注意到的更简单的方法吗？

非常感谢您对此主题的任何帮助。一个简单的工作版本的例子将更加感激。谢谢！

Answer 1

我将关注这个问题，因为了解真正的流媒体解决方案会非常好。我的经验仅限于使用 WebAudio API 播放两种声音，它们之间有给定的停顿。数据实际上是在服务器上生成并使用 Thymeleaf 下载到两个保存要播放的 PCM 数据的 javascript 变量中。但这些数据很容易在客户端本身通过 Javascript 生成。

鉴于有大量的沉默，以下内容不是很好，但几乎是可行的。我在想，管理一个带有变量名称的有序 FIFO 队列，并在您希望播放关联的音频时使用某种计时值，并具有一个定期轮询队列并将命令加载到 javascript setTimeout 延迟方法中的函数根据队列中给定的时间值计算的数量。

对于我拥有的一个受限应用程序，按钮调用以下内容（我在其中编写了一个播放 javascript 变量中保存的声音的方法）

playTone(pcmData1);
setTimeout(() => playTone(pcmData2), 3500);

我有幸知道 pcmData1 的长度为 2 秒，并且两个声音之间有固定的暂停间隔。我也不指望显着的计时精度。对于您的连续播放工具，它只有 setTimeout 部分，其中包含 pcmData 变量的值以及从调度 FIFO 队列中获得的时间。

这是否有用并触发了一个有用的想法，IDK。希望有更多经验的人能向我们展示如何实时传输数据。这当然可以用 Java 轻松完成，使用它的 SourceDataLine 类，它具有有用的阻塞队列方面，但我还没有找到 Javascript 等价物。