Microphone Input in rnbo~ with Web Export


    Austin Franklin
    Sep 07 2023 | 7:46 pm
    I’ve gone through the Learn documentation and the web template for rnbo~, and can’t find anything about using microphone input from a device to feed audio into a patch. Does the in~ object work with the Web Export, or is there additional code in JavaScript/HTML that is need to engage the microphone of the device? For reference, I want to prototype a website that can be accessed by a mobile phone and take in audio and process it.

    • Florian Demmer's icon
      Florian Demmer
      Sep 08 2023 | 2:42 pm
      Hi Austin,
      you are right that there currently isn't a specific example that shows how to do that but happy to help. One can think of accessing the microphone and creating the audio stream that will be fed into your exported RNBO patch as a responsibility of the host (in your case the website / app). For achieving this WebAudio provides the concept of a MediaStreamAudioSourceNode that can then be connected to your RNBO device. There is a few small steps involved to get there, partially in order to ensure the user's consent / privacy for accessing the mic. I've put a simple example up here: https://codepen.io/team/cycling74/pen/RwEKOVz/0f3a02def2a7e49f074fcfff33ddf65b
      To run the page click the "start" button to enable microphone input and then adjust the "gain" slider to control the gain of the output of your microphone input.
      The RNBO patch itself is just a simple passthrough with a gain control:
      Max Patcher
      In Max, select New From Clipboard.
      Show Text
    • Austin Franklin's icon
      Austin Franklin's icon
      Austin Franklin
      Sep 13 2023 | 2:06 pm
      Fantastic. Thank you for your help, this makes total sense. I occasionally ran into a TypeError issue setting the gain with .normalizedValue in my browser, but eventually got it working. A "Gain" param just after the in~ object in rnbo~ worked in the meantime.
    • Austin Franklin's icon
      Austin Franklin's icon
      Austin Franklin
      Sep 18 2023 | 10:53 am
      Hey again,
      I'm wondering if you've noticed any issues with synthesis in browsers? For instance, a single sine tone results in glitching for mobile devices only and works fine on a laptop. I have an example of my issue here: https://github.com/austinfranklin/rnbo-test/settings/pages
      Curious if I'm doing something wrong in rnbo~ (although I'm just running a single sine wave with a gain parameter) or if there is an issue with efficiency on a mobile phone?