Effects

Introduction

Effects process incoming audio. There are occasions when effects may generate sound that is reactive to or driven by the incoming audio signal.

The goal of this guide is to demonstrate simple and reliable patterns for building each of these using the standard Web Audio API. These examples intentionally avoid complex frameworks and focus on the core audio building blocks that work well inside WAX.

Audio Input

WAX uses the microphone input interface to stream audio from the DAW host into the web app. By using the standard getUserMedia() microphone pattern, the same codebase can run both inside WAX and in external browsers without modification.

// Request microphone / host audio input

navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {

  const input = ctx.createMediaStreamSource(stream)

})

Simple Effect Chain

input → effectNode → gainNode → ctx.destination

// Audio context
const ctx = new AudioContext()

// Capture host audio via microphone interface
navigator.mediaDevices.getUserMedia({ audio:true })
.then(stream => {

  const input = ctx.createMediaStreamSource(stream)

  // Simple gain effect
  const gainNode = ctx.createGain()

  input.connect(gainNode)
  gainNode.connect(ctx.destination)

})

MIDI

// Request MIDI access
navigator.requestMIDIAccess().then(access => {

  access.inputs.forEach(input => {

    input.onmidimessage = e => {

      const status = e.data[0]
      const cc = e.data[1]
      const value = e.data[2]

      // Status byte 0xB0 = Control Change
      if((status & 0xF0) === 0xB0){

        // Example: CC1 controls the gain effect
        if(cc === 1){
          gainNode.gain.value = value / 127
        }

      }

    }

  })

})