代码之家 › 专栏 › 技术社区 › Anonymous

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

web-audio reactjs javascript

0

Anonymous · 技术社区 · 6 年前

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

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音频过滤器节点,以及 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>
    }

refs API,但它似乎不适合与任意数量的子类一起使用。不过,很高兴以其他方式显示它!

1 回复 | 直到 6 年前

1

Matt 6 年前

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

this.filter . 然后我不得不 use refs 到处一切要访问方法,我需要连接节点并设置值。它发出了我想要的声音,但我不喜欢我的文件耦合得如此紧密和冗长。

我重构了一切。现在有一个文件使用管理所有音频节点的音频上下文。它公开了一些方法,我可以根据需要更新值。我还有一个字符串名到节点的映射,所以我设置如下值: setValue('filter', 'frequency', newValue)

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