How to connect to microphone using the Web Renderer

[rajangdavis]

I started experimenting with elementary today and was able to generate a tone using the example from the web renderer documentation; however, I have no idea how to send a microphone signal to the renderer.

Here is what I have so far within a React component:

import WebRenderer from "@elemaudio/web-renderer";
import { el } from "@elemaudio/core";

export default function ElementaryTest(props) {
  // connects to microphone signal
  async function connectInputSignal(context) {
    if (context.state === "suspended") {
      await context.resume();
    }
    let stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: false,
        autoGainControl: false,
        noiseSuppression: false,
        latency: 0,
      },
    });
    return context.createMediaStreamSource(stream);
  }

  // attach to web renderer
  // this is where I get lost
  async function attachWebRenderer(inputSignal) {
    const core = new WebRenderer();
    console.log("inputSignal", inputSignal);
    core.on("load", function () {
      core.render(
        el.lowpass(800, 1.414, el.in({ channel: 0 })),
        el.lowpass(800, 1.414, el.in({ channel: 1 })),
      );
    });

    let node = await core.initialize(inputSignal.context, {
      numberOfInputs: 1,
      numberOfOutputs: 1,
      outputChannelCount: [2],
    });

    node.connect(inputSignal.context.destination);
  }

  // creates context and connects things together
  async function startSound() {
    if (navigator.mediaDevices) {
      let context = new AudioContext();
      let inputSignal = await connectInputSignal(context);
      inputSignal.connect(context.destination);
      await attachWebRenderer(inputSignal);
    }
  }

  return (
    <>
      <button onClick={startSound}>Start</button>
    </>
  );
}

[nick-thompson]

Hey @rajangdavis, you're so close!

node.connect(inputSignal.context.destination);

Right here you basically would want something like:

inputSignal.connect(node);
node.connect(inputSignal.context.destination);

So the inputSignal which is your MediaStreamSourceNode connects to the AudioNode returned from WebRenderer.initialize, which then connects to the destination. Once you have that wired up, you can reference the input signals in your elementary graph using el.in({channel: 0}). For example,

core.render(
  el.in({channel: 0}),
  el.in({channel: 1}),
)

This would render a stereo pass-through graph from input to output. In order for stereo in to work, you have to make sure you configure elementary's initialize method correctly:

    let node = await core.initialize(inputSignal.context, {
      numberOfInputs: 1,
      numberOfOutputs: 1,
      outputChannelCount: [2],
      inputChannelCount: [2],
    });

Of course if you're just using a mono input then your configuration is already correct and you can just use el.in({channel: 0}) as your reference in the elem graph.

Let me know if that helps

[rajangdavis]

@nick-thompson Thank you for the fast response!

Your suggestion works with my built in microphone and my iPhone microphone; however, I can't seem to apply the effects to the signal of my audio interface. The signal from the interface is present, but no effects are applied.

Here is my updated code:

import WebRenderer from "@elemaudio/web-renderer";
import { el } from "@elemaudio/core";

export default function ElementaryTest(props) {
  const core = new WebRenderer();
  core.on("load", function () {
    core.render(
      el.delay({size: 44100}, el.ms2samps(500), 0.6, el.in({channel: 0})),
    );
  });

  // connects to microphone signal
  async function connectInputSignal(context) {
    if (context.state === "suspended") {
      await context.resume();
    }
    let stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: false,
        autoGainControl: false,
        noiseSuppression: false,
        latency: 0,
      },
      numberOfInputs: 1,
      numberOfOutputs: 1,
      outputChannelCount: [2],
      inputChannelCount: [1],
    });
    return context.createMediaStreamSource(stream);
  }

  // attach to web renderer
  async function attachWebRenderer(inputSignal) {
    let node = await core.initialize(inputSignal.context, {
      numberOfInputs: 1,
      numberOfOutputs: 1,
      outputChannelCount: [2],
      inputChannelCount: [2],
    });
    inputSignal.connect(node);
    node.connect(inputSignal.context.destination);
  }

  // creates context and connects things together
  async function startSound() {
    if (navigator.mediaDevices) {
      let context = new AudioContext();
      let inputSignal = await connectInputSignal(context);
      inputSignal.connect(context.destination);
      await attachWebRenderer(inputSignal);
    }
  }

  return (
    <>
      <button onClick={startSound}>Start</button>
    </>
  );
}

[nick-thompson]

Hey @rajangdavis! So you're hearing the dry input signal through your output device but not hearing that feedback delay? One thing to check here is which default device you have selected, because as far as I know you still can't manually choose an output device for web audio. So if you're taking input from your interface, make sure your default output device is also your interface.

[rajangdavis]

So if you're taking input from your interface, make sure your default output device is also your interface.

That is how I have things set up... I suspect the issue might be with some configuration or with my audio interface itself, I'll do some research and see if I can figure something out. Thank you again for you quick and thoughtful responses, I really appreciate it!