通过Redux中的回调调度操作



我正在Redux中构建一个步序器来帮助我学习。我需要的是一些通用的时钟,它可以作为"滴答"来提供音乐计时。因此,我计划使用Tone.js库,它构建在WebAudio API之上。有以下功能:

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

您提供了一个回调函数,每当传输到达某个位置时都会调用该函数。我天真的方法是让回调调度一个操作,使我的存储中的tick计数递增。这不起作用,因为操作必须是普通对象。实现这一目标的可能性有哪些?

我仍在努力正确理解Redux的基本原理,所以我不确定,但我能不能使用中间件捕获回调,并在实际调用时让它通过?

这是正确的方向吗?我可以研究哪些库、示例或概念来了解如何做到这一点?

这是正确的方向吗?还是我应该采取不同的做法?如果是,如何?

或者,你可能知道为Redux应用程序中的不同组件提供全局定时的最佳方式是什么吗?

我在https://www.html5rocks.com/en/tutorials/audio/scheduling/,但简而言之,您不应该使用Javascript回调来进行音乐计时。它不够准确。这就是为什么我们有网络音频调度。

非常有趣的问题,这是我一直想解决的一个热门项目,但还没有写一个LOC。:)

对于计时部分,您可以使用中间件,甚至可以使用<Clock />组件来启动scheduler本身,并在每个节拍上调度一个操作(可能将时间作为有效负载)。

然而,棘手的部分是应用程序的整体设计。在对Tone.js进行了一点研究后,我很清楚你必须将音频部分与视觉部分分开。这意味着你的Redux状态应该只关心表示你的步序器(我正在可视化类似于通道(通道/仪器)列表的东西),你的音频逻辑应该保持在它之外。

我会保留一个车道阵列,每个车道本身就是一个"步骤"阵列,定义它们是否"活动"。同样,这只是与UI相关的。点击一个步骤激活它应该可以通过动作创建器修改你的状态,还可以设置你以后需要玩Tone.js的任何东西。

播放歌曲时,您需要调度时钟节拍来推进当前活动的"步骤",以便在UI中突出显示它。

这里有一个令人垂涎的Codepen模仿Roland TR-808来获取想法:

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

这是Tone.js维基上关于同步音频和UI的相关部分:

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

很抱歉,我不能进一步帮助你,也许你已经领先于我,并且已经有了一些可以共享的工作代码。

基本上cwilso响应正确。如果你想为音乐计时安排JS函数,你不应该使用回调。

如果您希望在此定时基础上实现Tone.js功能,请避免使用Redux,直接在回调函数或Tone.Transport.schedule函数中调用这些Tone.jss函数。

如果你正在构建一个音序器,我建议根据你想要的长度循环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");

希望这能有所帮助。

我正在开发一个音频相关的应用程序,并遇到了管理web音频API部分以及redux的问题。

我解决这个问题的方法只是将音频状态的表示存储在redux存储中(纯JS对象;您将存储在数据库中并用于初始化应用程序的对象)。此存储的信息用于呈现UI。

我有一个服务"引擎"类,它可以监听商店中的所有更改,这是创建和存储所有网络音频内容的地方。它基本上包含redux存储中reducers的副本,但将更改应用于web音频节点。

例如,我调度一个动作:

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

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

在您的情况下,您将调度一个操作来设置时间,在redux存储中将其保存为纯JS对象,在引擎部分使用web音频调度来设置它。

最新更新