Exporting Web Audio with MAX/MSP using RNBO.

Start the patch, then drag the sliders to modify the delay parameters in real time. (sometimes a second click is needed to start the patch — seems like a streaming bug)

Using React / NextJs to pull in a patch.

"use client"
import { createDevice, MIDIEvent, Parameter } from "@rnbo/js"
import { useState } from "react"
import patch from "../../../../patches/delay/patch.export.json"

function Rnbo() {
  const [patchDevice, setPatchDevice] = useState<any>()
  const WAContext = window.AudioContext
  const context = new WAContext()

  const handleClick = async () => {
    const device = await createDevice({
      patcher: patch as any,
      context,
    })

    const fileResponse = await fetch(
      "https://res.cloudinary.com/object-sonore/video/upload/v1675972689/saint-salo-local/audio/gland-block_q0pbmb.wav"
    )
    const arrayBuf = await fileResponse.arrayBuffer()
    const audioBuf = await context.decodeAudioData(arrayBuf)

    await device.setDataBuffer("myfile", audioBuf)

    device.node.connect(context.destination)

    device.messageEvent.subscribe(e => console.log(e.payload))
    device.midiEvent.subscribe((e: MIDIEvent) => console.log(e.data))
    setPatchDevice(device)
    console.log(device.parameters)
  }

  // drag a slider -> push the value straight into the live device
  const updateParam = (param: Parameter, value: number) => {
    param.value = value
  }
  ...