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';
Bug 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 thestop audio
button, the audio will end normally. However, if you shut down the audio after pressing therecording 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
Minimal code snippet
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', }) );
}