I would like to request you to add a description of the startMic and startRecording functions of RecordPlugin to the official document

[milk717]

Problem Description

If RecordPlugin calls the startRecording function first and then the startMic function, the stream that was created by the startRecording call is overwritten by the startMic function call, making the first stream that was created indefinitely.
Therefore, it would be good if you could state in the official document that you need to call startMic before startRecording.
I didn't know these things, so I spent a lot of time trying to solve the issue of audio not shutting down.
If you try the code below, press the micro first button and press the stop audio button, the audio will end normally. However, if you shut down the audio after pressing the recording first button, the audio will not end.
I think adding these warnings to the document will reduce unnecessary time for many people due to this issue.

Environment

• Browser: Arc
  

Minimal code snippet

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

export default function Home() {
    const recorderRef = useRef<RecordPlugin | null>(null);
    useEffect(() => {
        const waveSurferInstance = WaveSurfer.create({
            container: '#waveform',
        });
        const recorderInstance = waveSurferInstance.registerPlugin(
            RecordPlugin.create({
                scrollingWaveform: true,
                renderRecordedAudio: false,
                mimeType: MediaRecorder.isTypeSupported('audio/webm')
                    ? 'audio/webm;codecs=pcm'
                    : 'audio/mp4',
            })
        );

        recorderRef.current = recorderInstance;
    }, []);

    const handleMicFirstButtonClick = async() => {
        await recorderRef.current?.startMic()
        recorderRef.current?.startRecording();
    }

    const handleRecordingFirstButtonClick = () => {
        recorderRef.current?.startRecording();
        recorderRef.current?.startMic()
    }

    const handleStopBoth = () => {
        recorderRef.current?.stopMic();
    }

    return (
        <main className="flex" id="waveform">
            <button className="p-4 border" onClick={handleMicFirstButtonClick}>mic first</button>
            <button className="p-4 border" onClick={handleRecordingFirstButtonClick}>recording first</button>
            <button className="p-4 border" onClick={handleStopBoth}>stop audio</button>
        </main>
    );
}

Screenshots

2024-04-18.7.10.12.mov