多个音频文件的位置相关音频播放

Question

我一直在设计一个基于 html/js 的媒体播放器，其目标是为用户提供一些常见 DAW 中的简单播放和区域移动功能。我的 ui 由 5 个单独的曲目和播放控件组成。通过使用wavesurfer.js，我已经能够成功地在这些轨道内创建任意数量的wavesurfer 实例/区域，将它们拖放到我想要的任何位置，并播放选定的音频文件。

在我对 wavesurfer.js 的实验中，我发现每个实例都有自己的播放头，它指示所选音频文件的当前播放位置，并允许用户在该实例中导航播放。

我的问题是我还想要一个不包含在任何特定实例中的“主”播放头，并且不确定如何处理。

虽然那里有复杂的网络 DAW，但我还没有找到真正帮助我了解如何以我需要的方式处理音频播放的来源……但我知道以前有人做过。我已经阅读了 webaudio API 和 wavesurfer.js 文档，除非我在 wavesurfer 的功能中缺少某些东西，否则我假设我需要使用 webaudio API 来实现这个结果 - 我会从定义一个新的 AudioContext 对象开始由所有当前音频文件作为 AudioNodes 组成？

对于多个音频文件/wavesurfer 实例，其播放必须依赖于它们在整个轨道工作区上下文中的用户确定位置，我将如何处理音频播放？

感谢您的任何见解，我很感激。

Answer 1

如果您使用例如 5 个 trackout，您需要注意，如果您将它们加载到音频缓冲区（或您称为 em 的音频节点）中，如果它们更长，它们实际上会变得相当大。因此，如果您使用五个音频元素并设置它们的状态和位置，也许您可​​以达到您的目标，尽管这些音频元素无法通过过滤器和效果等（Convolver 等）轻松访问。这实际上取决于您的设置，并且原型不应该太难编程，所以如果您真的对它充满热情，您可以同时制作两者。

在我的网站 1ln.de 上，您可以在音频位置加载 mp3 文件（不同），如果您在内存中加载 5 个 mp3，则 RAM 将达到 8 GB 的 30%。但是 RAM 比流式传输音频快得多。因为音频元素需要先缓冲它们的内容，而你不能像音频缓冲区那样简单地处理和操作它们。

这实际上取决于您的工具的复杂性以及您想要实现的目标。

对于专业用途和快速播放，我建议您使用音频缓冲区进行播放。不过，首先解码音频文件需要一些时间。但是你可以在缓冲完成时处理。

希望我的问题是正确的。

如果您想对 DAW 进行编程，请随时打个招呼以寻求帮助。