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

时间:2018-01-16 23:45:04

标签: javascript html5 audio web-audio wavesurfer.js

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

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

我的问题是我还想拥有一个"主人"没有包含在任何特定实例中的播放头,我不确定如何处理它。

虽然有很复杂的网络DAW,我还没有找到一个真正帮助我了解如何以我需要的方式处理音频播放的来源。但我知道它已经知道了以前做过。我已经阅读了webaudio API和wavesurfer.js文档,除非我在waveurfer的功能中遗漏了一些东西,我假设我需要使用webaudio API为了实现这个结果 - 我首先要定义一个由所有当前音频文件组成的新AudioContext对象作为AudioNodes吗?

对于多个音频文件/ waveurfer实例,其播放必须依赖于整个轨道工作区环境中用户确定的位置,我将如何处理音频播放?

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

1 个答案:

答案 0 :(得分:1)

如果你使用例如5个跟踪,你需要知道如果你把它们加载到audiobuffers(或像你叫它们的audionodes),如果它们更长,它们实际上会变得非常大。因此,如果您使用五个音频元素并设置其状态和位置,也许您可​​以达到目标,尽管这些音频元素不能通过滤镜和效果等轻松访问(Convolver等)。这真的取决于你的设置,原型不应该太难编程,所以如果你真的很热衷于它,你可以做到这两点。

在我的网站1ln.de,你可以在音频位置加载mp3文件(不同),如果你在内存中加载5个mp3,RAM可以达到8 GB的30%。但RAM比流式音频要快得多。因为音频元素需要首先缓冲它们的内容,你不能像音频缓冲区一样容易地处理和操作它们。

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

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

希望我的问题是正确的。

如果您想编程DAW,请随时打个招呼,寻求帮助。