trouble connecting components in react

[perryf]

So, I'm not sure of the best way to describe the issue I'm having, but I will try. I have different sound sources(waves) which I can duplicate. On top of those waves, I have different filters that the sound sources are being passed through, those are duplicated when the sound source is duplicated. I have an array of waves, and an array of distortion filters, one per wave. the problem is when I am adjusting the distortion on one of the waves, react is getting screwy and adjusting the distortion on all of the waves, or just erroring out.
the error looks something like this

'Error: error disconnecting node: [object GainNode]
InvalidAccessError: Failed to execute 'disconnect' on 'AudioNode': output (0) is not connected to the input (0) of the destination.'

I'm not exactly sure which part of the code is messing this up. Any thoughts?

class Main extends Component {
  constructor() {
    super()
    this.state = {
      synths: [synthInit],
      distortion: [distortionInit]
      // lfo: [lfoInit]
    }
  }

  connectToMaster(synth, distortion) {
    if (distortion.toggle) {
      synth.connect(distortion)
      distortion.toMaster()
    } else if (distortion.toggle === false) {
      synth.disconnect(distortion)
      synth.toMaster()
    }
    else {
      synth.toMaster()
    }
  }

  addSound() {
    var newSynth = new Tone.Synth({
      frequency: 440,
      oscillator: { type: 'sine' },
      envelope: { attack: 0.01, decay: 0.1, sustain: 0.1, release: 0.1 }
    })

    var newDist = new Tone.BitCrusher(4)
    newDist.toggle = null

    // let newSynthArray = (this.state.synths, {$push: [newSynth]})

    this.setState({
      synths: this.state.synths.concat(newSynth),
      distortion: this.state.distortion.concat(newDist)
    })
    // this.setState({
    //   synths: [...this.state.synths, newSynth],
    //   distortion: [...this.state.distortion, newDist]
    // })
  }

  distToggleHandler(e, distortion, index) {
    let value = e.target.checked
    let newDistortion = update(this.state.distortion[index], {toggle: {$set: value}})
    let newDistortionArray = update(this.state.distortion, {$splice: [[index, 1, newDistortion]]})
    console.log(this.state.distortion)
    this.setState({
      distortion: newDistortionArray
    })
  }

  render() {
    let synths = this.state.synths.map((synth, index) => {
      // let lfo = this.state.lfo[index]
      let distortion = this.state.distortion[index]
      this.connectToMaster(synth, distortion)
      console.log(this.state.synths)
      console.log(this.state.distortion)

[jsm13]

I'm not familiar at all with the Web Audio API so I'm taking a while to sort through this. I'll keep looking and follow up but in the mean time, there's a library, SoundJS that is meant to make working with web audio easier and you may find interesting. Is your most recent code pushed?

[jsm13]

ah, nm I don't think SoundJS does anything special Tonejs doesnt

[perryf]

hmm, yeah I'm pretty happy with ToneJS so far, but I'm definitely into looking into SoundJS once this is over. I main problem I'm having, I think, is that I'm connecting an array of lots of sounds to lots of filters to a main audio output, and I'm kind of losing track along the way

[perryf]

ahhhh, ok. I got it working. It came down to the way I was disconnecting the distortion.

      distortion.disconnect() //disconnects distortion
      synth.toMaster()   //synth sound now connects straight to master

It likes this ^^^ :)

      synth.disconnect(distortion) //disconnects synth from distortion
      synth.toMaster() //connects synth straight to master
    }

It doesn't like this ^^^ :(

[jsm13]

oh boy, I was not going to track that down. Good find

[perryf]

It was trial and error really. Thanks John!