通过Redux中的回调调度动作

Question

我正在Redux中构建步进音序器以帮助我学习。 我需要的是一些通用时钟，可充当“滴答声”以提供音乐计时。 因此，我计划使用基于Web Audio API构建的Tone.js库。 有以下功能 ：

Tone.Transport.scheduleRepeat(function(time){
//do something with the time
}, "8n");

您提供了一个回调函数，每次传输到达某个位置时都会调用该函数。 我幼稚的方法是让回调函数分派一个动作，该动作增加我商店中的滴答计数。 这是行不通的，因为操作必须是普通对象。 使这项工作可行的可能性是什么？

我仍在努力对Redux的基本基本原理有正确的了解，因此我不确定，但是我可以使用中间件以某种方式捕获回调并在实际调用它时让它通过吗？

这是正确的方向吗？ 我可以研究哪些库，示例或概念，以了解如何实现？

这是否是正确的方向，还是我应该以不同的方式处理？ 如果是这样，怎么办？

还是您可能不知道在Redux应用程序中为不同组件提供全局计时的最佳方法是什么？

Answer 1

我在https://www.html5rocks.com/zh-cn/tutorials/audio/scheduling/中进行了详细介绍，但总而言之-您不应该将Javascript回调用于音乐计时。 它不够准确。 这就是为什么我们要进行网络音频调度。

Answer 2

非常有趣的问题，那是我也想解决的一个宠物项目，但还没有编写任何LOC。 :)

对于计时部分，您可以为此使用中间件，甚至可以使用<Clock />组件来启动scheduler本身，并在每个滴答声上调度一个动作（可能以时间作为有效负载）。

但是，棘手的部分是应用程序的总体设计。 对Tone.js进行了一些研究之后，对我来说很明显，您必须将音频部分与视觉效果分开。 这意味着您的Redux状态仅应关注代表您的步进音序器（我正在可视化诸如车道列表（通道/乐器）之类的内容，并且您的音频逻辑应保留在其外部。

我会保留一组通道，每个通道本身就是一组“步骤”，用于定义它们是否处于“活动”状态。 同样，这仅与UI相关。 单击一个步骤将其激活，这将通过动作创建者来修改您的状态，并设置以后需要使用Tone.js进行播放的任何内容。

播放歌曲时，您需要分派该时钟滴答以推进当前活动的“步骤”，以便可以在UI中突出显示它。

这是令人垂涎的Codepen，模仿Roland TR-808来汲取创意：

http://codepen.io/pixelass/details/adyLPR

这是Tone.js Wiki上有关同步音频和UI的相关部分：

https://github.com/Tonejs/Tone.js/wiki/Performance#syncing-visuals

抱歉，我不能再为您提供帮助，也许您在我之前，已经有了一些可以共享的工作代码。

Answer 3

基本上，cwilso的响应正确。 如果要为音乐定时安排JS函数，则不应使用回调。

如果您希望基于此时间实现Tone.js功能，请避免使用Redux并直接在回调函数或Tone.Transport.schedule函数中调用这些Tone.js函数。

如果您要构建音序器，我建议您根据所需的长度循环Tone.Transport并安排在时间轴上的某些点（如果您要查找的话）击中音符。 在文档中查看loopStart和loopEnd以获得帮助（ http://tonejs.github.io/docs/#Transport ）。

如果视觉参考需要此功能，这可能就是为什么要使用Redux回调的原因，我可以在下面提供一个示例，说明如何实现：

function incrementTick() {
  return { type: 'INCREMENT_TICK' }
}

// inside your component once the increment function has been connected
Tone.Transport.scheduleRepeat((time) => {
  this.props.incrementTick()
}, "8n");

希望这可以帮助。

Answer 4

我正在开发与音频相关的应用程序，并且还遇到了与Redux一起管理Web音频API部分的问题。

我解决的方法是仅将音频状态的表示形式存储在redux存储区（纯JS对象；将存储在数据库中并用于初始化应用程序的内容）。 此存储的信息用于呈现UI。

我有一个服务“引擎”类，它侦听商店中的所有更改，这是创建和存储所有Web音频内容的地方。 它基本上包含来自redux存储的reducer副本，但会将更改应用于Web音频节点。

例如，我调度一个动作：

{type:"set-gain", payload:{trackid:3, value:0.7} }

redux存储将简单地将普通的JS跟踪对象更新为新的增益值，引擎将找到关联的增益节点（或使用add等创建）并在其上设置值。

在您的情况下，您将调度一个操作来设置时间，在redux存储中将其另存为纯JS对象，在引擎部分中，您将使用网络音频调度对其进行设置。