javascript - 使用 React 和 Web Audio 进行状态管理

Question

我正在尝试使用 Web Audio API 和 React 编写一个基于模块的音乐应用程序。

到目前为止，我一直在创建 React 组件时创建 Web 音频节点，例如过滤器、振荡器等:

class Filter extends React.Component {
    constructor(props) {
        super(props);
        const filter = props.context.createBiquadFilter();
        this.state = { filter };
    }
...

稍后，这意味着可以将过滤器更改为组件状态的一部分:

    frequencyChange(event) {
        ...
        this.state.filter.frequency.setValueAtTime(range.value, context.currentTime);
    }

并在渲染方法中:

<input type="range" className="slider" min={20} max={20000}
                   onChange={event => this.frequencyChange(event)}/>

但是，当涉及到将过滤器链接在一起时，我需要能够 disconnect() 我从该组件的父类创建的 Web Audio 过滤器节点，并且 connect() 将其连接到新的目的地。

假设父组件名为 EffectsBox，旨在渲染任意效果列表，例如 Filter。

• 它应该如何呈现所有这些组件，并允许它们公开一些用于将音频链接在一起的通用 API？

• 这些效果的状态(即网络音频组件)应该存储在哪里？

这里有一些示例代码，希望能让我的问题更清楚:

class EffectsBox extends React.Component {
    ...

    addNewEffect(effect) {
        // disconnect() the previous effect and connect() it to a new one 
    }

    render() {
        // Maybe some kind of "map" here between effects and react components?
        return <div>{ this.state.effects }</div>
    }

注意– 我读过有关 React 的 refs API，但它似乎不适合与任意数量的子类一起使用 – 但很高兴能够以其他方式展示!

Answer 1

React 不喜欢在不使用 setState 的情况下编辑组件状态中的值。我会避免将整个音频节点置于状态中，甚至根本不会置于组件中。

我曾一度尝试将音频节点添加为构造函数中类的一部分，这样我就可以通过 this.filter 来访问内容。然后我不得不 use refs 无处不在并将音频上下文传递给所有以访问连接节点和设置值所需的方法。它发出了我想要的声音，但我不喜欢我的文件的紧密耦合和冗长。

我重构了一切。现在有一个文件使用管理所有音频节点的音频上下文。它公开了一些方法，我可以使用它来根据需要更新值。我还有一个字符串名称到节点的映射，因此我设置如下值:setValue('filter', 'Frequency', newValue)。有一些情况需要单独处理(即畸变曲线)，但总体来说对我来说更容易阅读。这种抽象还意味着您的音频节点对组件层次结构的变化不敏感。

这是我推荐的。将音频节点从 React 类中拉出。管理管理节点的代码要简单得多。