[Extend Feature]: Source - AudioDeviceSelector

[YeonV]

Add Audio-Input as Source-Node.

const [devices, setDevices]=useState<Array<any>>([])
  navigator.mediaDevices.enumerateDevices()
  .then(function (dev) {
    setDevices(dev.filter(d=>d.kind === 'audioinput'))
  })
  .catch(function (err) {
    console.log(err.name + ": " + err.message);
  });

So people can use Microphone (or steromix/loopback)

you can set/request for the correct input device like this:

const getMedia = async (clientDevice) => {

  try {
    return await navigator.mediaDevices.getUserMedia({
      audio: navigator.mediaDevices.enumerateDevices()
        .then(function (devices) {
          (clientDevice === null || devices.indexOf(clientDevice === -1)) ? true : { deviceId: { exact: clientDevice } }
        }),
      video: false,
    })
  } catch (err) {
    console.log('Error:', err)
  }
}

[michalochman]

See https://github.com/michalochman/react-web-audio-graph/issues/12#issuecomment-1032630404

[michalochman]

This will be possible, I have already been able to connect microphone or guitar audio using an audio interface, but have not included it in the project yet.

[YeonV]

it does work broo :)

[michalochman]

@YeonV can you open pull request with the change?

[YeonV]

@michalochman I only had a play around with it. changed ui and some small stuff, added keyboard control, added self-ported aubio, added dummy nodes, still to be filled. i have very little skills in typscript and did all a bit noobish. i think my code quality is too bad for a pull request. I invited you to my repo and maybe you see something useful and can take it out and include it with proper coding?

repo is privat until its a bit less noobish and i get your approvement, but everything i did is for all ofc.

REPO

DEMO

notes:

after clicking one piano-key with the mouse, you can play with your keyboard: asdfghjklö are the white keys.

i create a dummy node: aubio. Maybe you have a tip, how to properly integrate it?: https://github.com/qiuxiang/aubiojs

[michalochman]

Hi @YeonV, I've added support for input devices in #16.

I have just noticed that you have figured out how to access output devices so I'll try that as well. Thanks for that!

[michalochman]

Ah, now I see that different output devices are actually not implemented :(

AudioContext.createMediaStreamDestination() takes no arguments, so it looks like it is indeed not possible to do right now.