Javascript 多节拍/米js DAW

是否有人像大多数桌面DAW（pro工具、sonar等）一样实现了具有多种节拍和节拍变化功能的javascript音频DAW？据我所知，不要这样做。在项目期间，当节奏和米不改变时，绘制网格米、在采样和MBT时间之间转换以及绘制波形是很容易的，但当它们改变时，会变得相当复杂。我正在寻找有关如何完成类似任务的任何信息。我知道Audacity的源代码是可用的，但我不想用一种我不是专家的语言去挖掘大量代码来解决这个问题。

您错过了最后一步，这将使它变得更容易

所有测量都是基于时间特征和节奏，以分钟为单位

数学变得更复杂了，现在你不能简单地画出4/4或6/8的全图并完成它，但你看到的是运行一条实际的时间线（无论是否在屏幕上绘制），然后根据轨道当前长度的运行总和（分/秒）计算出每个测量的开始和结束位置，或者根据最左边的x坐标（起点）+持续时间

或者根据每个测量长度的跑步总长度（以秒为单位），直到您关心的当前节拍

var measure = { beats : 4, denomination : 4, tempo : 80 };

考虑到这三个数据点，您应该能够说：

var measure_length = SECONDS_PER_MINUTE / measure.tempo * measure.beats;

当然，现在是几秒钟。要用毫秒表示，你只需要用毫秒每分钟，或者你想要测量的其他分钟比率

current_position + measure_length === start_of_next_measure;

现在，您已经分离出了允许您动态计算每个度量值所需的每个维度

在轨道上定位每个测量值，以匹配其在时间轴上的位置，非常简单，只需以毫秒为单位（实际上是屏幕空间和投影坐标，但毫秒目前可以正常工作）记录X的位置（测量值的左边缘）

绘制示例只需要确定从何处开始，然后保持一定的分辨率（MS/MS*4/秒）

分离时间计算的另一个好处是，只要在缩放后重新渲染整个内容，就可以通过更改比较的时间比例（ms/sec/min/etc）动态更改渲染的分辨率

兔子洞更深（例如，虽然量化过程确实如此，但实际的音频轨迹并不真正关心度量/节拍），因此要编写一个非破坏性的非线性DAW，您只需将视图的开始时间和持续时间属性设置到音频缓冲区中（或将视图设置到音频缓冲区的视图缓冲区中）。
这些视图将是非破坏性窗口，您可以调整其大小并在轨迹周围拖动

然后是计算快照的逻辑——屏幕空间是多少，相对于项目空间，当你点击一个曲目的剪辑时，你所处的位置，等等，在调整大小/移动时进行音频快照

当然，在浏览器中JS工具的1:1的重新设计不会飞（一个浏览器标签的GRAM不能用，媒体捕获API仍然不足以进行多点跟踪，在磁盘上写的比在C++中要困难得多，在你的操作系统中，等等），但是这至少应该给你足够的运行。p>

---

如果我遗漏了什么，请告诉我。

存在基于web的DAW解决方案。基于web的DAW被视为SaaS（软件即服务）应用程序。 它们是轻量级的，包含基本的DAW功能。 在设计富客户机应用程序（RCA）时，您应该了解GWT和Vaadin

我推荐GWT，因为它是成熟的，有可重用的组件，而且它也是AJAX驱动的。

---

在这里，他们列出了九种不同的基于浏览器的音频工作站。您也可以参考这些工作站，它们完全是javascript代码。您可以从中获得一些灵感，开始使用。

哇，给我一点时间来查看一下，我会看看是否有任何问题。谢谢你的时间！似乎无论我做什么，我都无法用这个接近大多数现代道士的表现。如果我在飞行中计算所有内容，缩放和滚动都是缓慢而急促的。如果我对项目中的每个滴答声使用预先计算好的查找表，事情就会顺利进行，但每次我想改变节奏时，速度都会大大减慢。我肯定错过了一些东西。@RobbyAllsopp如果不在画布上、在WebGL中、在精心打磨的数学库中、为性能而构建（即使是这样，也只有在你不为驾驶等而写作的情况下），你不可能接近现代DAW。也就是说，如果你在浏览器中使用DOM元素，那么你首先要考虑的一件事就是确保元素的所有计算（大小/位置）都与DOM渲染分开完成，DOM构建发生在DOM上（并且附加在后面），还有

requestAnimationFrame

s来保持事物的弹性。@Robbyallsop另一件你可能缺少的东西，DAW和视频游戏擅长，但网站不擅长，就是基于其他部分的遮挡来渲染选定的视图。把它放在FPS游戏中，如果你盯着北方，沿着大厅往下看，CPU仍然会做你身后的所有事情所需的所有数学运算，但不会绘制它（最昂贵的部分），这将节省GPU时间。同样，大厅尽头的门也不会被画出任何东西（除了你可以直接从窗户看到的东西），因为门挡住了视线…@RobbyAllsopp举个例子回到DAW。。。我不确定您是如何呈现它的——在HTML、画布、SVG中。。。这三个部分分别用于工作区的不同部分。。。但是，只看一下时间线中的刻度，在HTML中，这意味着你要找出屏幕的左边缘在哪里，右边缘在哪里，而不是做出40000<代码>var current_position = 0, current_tempo = 120, current_beats = 4, current_denomination = 4, measures = [ ]; measures.forEach(function (measure) { if (measure.tempo !== current_tempo) { /* draw tempo-change, set current_tempo */ /* draw time-signature */ } if (measure.beats !== current_beats || measure.denomination !== current_denomination) { /* set changes, draw time-signature */ } draw_measure(measure, current_position); current_position = MS_PER_MINUTE / measure.beats * measure.tempo; });