does not record from virtual microphone "Monitor of Built-in Audio Analog Stereo"

[ys-oo]

Bug description

wavesurfer is not capturing the audio from the system even when the browser grant the permission to do so ...

Environment

• Browser: firefox

Minimal code snippet ( next js )

'use client';

import React, { useEffect, useRef, useState } from 'react';
import WaveSurfer from 'wavesurfer.js';
import RecordPlugin from 'wavesurfer.js/dist/plugins/record.js';

const WaveSurferRecorder = () => {
  const micRef = useRef(null);
  const [record, setRecord] = useState(null);
  const [scrollingWaveform, setScrollingWaveform] = useState(false);
  const [audioDevices, setAudioDevices] = useState([]);
  const [selectedDeviceId, setSelectedDeviceId] = useState('');
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    const wavesurfer = WaveSurfer.create({
      container: micRef.current,
      waveColor: 'rgb(200, 0, 200)',
      progressColor: 'rgb(100, 0, 100)',
      barWidth: 4,
      barGap: 5,
      backend: 'WebAudio',
    });

    const recordPlugin = RecordPlugin.create({
      scrollingWaveform,
      renderRecordedAudio: false,
    });
    wavesurfer.registerPlugin(recordPlugin);

    setRecord(recordPlugin);

    RecordPlugin.getAvailableAudioDevices().then((devices) => {
      setAudioDevices(devices);
      if (devices.length > 0) {
        setSelectedDeviceId(devices[0].deviceId);
      }
    });

    return () => wavesurfer.destroy();
  }, [scrollingWaveform]);

  const startRecording = () => {
    record.startRecording({ deviceId: selectedDeviceId }).then(() => {
      setIsRecording(true);
    });
  };

  const stopRecording = () => {
    record.stopRecording();
    setIsRecording(false);
  };

  return (
    <div>
      <h1>Press Record to start recording 🎙️</h1>
      <button onClick={isRecording ? stopRecording : startRecording}>
        {isRecording ? 'Stop' : 'Record'}
      </button>
      <div
        ref={micRef}
        style={{
          border: '1px solid #ddd',
          borderRadius: '4px',
          marginTop: '1rem',
        }}
      />
    </div>
  );
};

export default WaveSurferRecorder;

Expected result

when giving the permission to use Monitor Built-in Audio Analog Stereo after clicking record wavesurfer should start capturing the audio from the system but this is not the case with built in audio, the code is only working with physical microphone.

[ys-oo]

For anyone not familiar with Next.js and React.js, this code might not make sense. So, here's a link to the official example that I've adapted to Next.js:
https://wavesurfer.xyz/examples/?record.js

[katspaugh]

I need more information. Does your virtual device get returned from getAvailableAudioDevices?

If not, does a bare call to navigator.mediaDevices.enumerateDevices() return it? What type does it have?

[ys-oo]

yes it get returned by getAvailableAudioDevices, and i tried to make audio visualization with wave.js using my virtual mic ( system audio monitor ) and every thing worked fine

[ys-oo]

i think this issue should still be open not closed at this early stage + i would be happy to help if you can tell me from which file the bug came from :)

[katspaugh]

It's not closed, feel free to debug it and add more info. At this point, I'm not convinced yet that it's a bug in the plugin. Perhaps try to create a minimal reproducible example w/o React.

[MariSarco]

I also encountered this issue (React + Vite): when passing device IDs, the one selected in the browser settings (Chrome) is still used.
The solution was to replace { deviceId: selectedDeviceId } with { deviceId: { exact: selectedDeviceId } }