Question

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

到目前为止，在创建React组件时，我一直在创建Web音频节点，例如Filters，Oscillators等：

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);
    }

以及在render方法中：

<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

在不使用public class AuthenticationResponse { [JsonProperty("id")] public string id { get; set; } [JsonProperty("result")] AuthenticationResult res { get; set; } } public class AuthenticationResult { [JsonProperty("sessionId")] string sessionId { get; set; } [JsonProperty("personType")] int personType { get; set; } [JsonProperty("personId")] int personId { get; set; } [JsonProperty("klasseId")] int klasseId { get; set; } }的情况下在组件状态下编辑值时，React不喜欢它。我会避免将整个音频节点置于状态，甚至完全置于组件中。

我曾经尝试过将音频节点添加为构造函数中类的一部分，因此我可以访问setState之类的东西。然后，我不得不use refs 无处不在，并将音频上下文传递给一切，以访问连接节点和设置值所需的方法。它发出了我想要的声音，但我不喜欢文件的耦合程度和冗长程度。

我重构了一切。现在有一个文件使用管理所有音频节点的音频上下文。它公开了一些方法，我可以根据需要使用这些方法来更新值。我也有一个字符串名称到节点的映射，因此我设置了以下值：this.filter。有几种情况需要单独处理（即失真曲线），但总的来说，我更容易阅读。这种抽象还意味着您的音频节点对组件层次结构的更改不敏感。

这是我的建议。将音频节点拉出React类。管理用于管理节点的代码要简单得多。

使用React和Web音频进行状态管理

1 个答案: