Slow start-up of voice recording

[visualight]

Hello,

I'm new to JS and VueJS but I've managed to create a little voicemail.

However, I'm encountering a problem. When I click to activate the microphone, I have to wait a good 2 to 3 seconds for the audio recording to start. I tested it on several browsers and on iOS.

Is this a general problem with browsers or with my code, or a possible bug with the record plugin?

I use the record plugin to have a real-time animated preview (waves) of the recording (it's more fun and pleasant).

I forgot to mention that the project is in vuejs with client-side rendering. I'm not working with node js for this application.

What do I need to do? What do you recommend?
Any examples are welcome!

Many thanks!

Here's my code :

initializeWaveSurfer() {
      this.wavesurfer = this.$wavesurfer.create({
        container: '#visualizer',
        backend:'playmiles',
        barWidth: 3,
        barHeight: 1.5,
        height: 46,
        responsive: true,
        waveColor: 'rgba(108,115,202,0.3)',
        progressColor: 'rgba(108,115,202,1)',
        cursorColor: 'transparent'
      });

      this.record = this.wavesurfer.registerPlugin(this.$recordPlugin.create());
    },
    startRecording() {
      this.isRecording = true;
      this.record.startRecording(); // slowing also the value isRecording to true :(
    },
    stopRecording() {
      this.isRecording = false
      this.record.stopRecording(); // Work fine

      this.record.once('stopRecording', () => {
        const blobUrl = this.record.getRecordedUrl();
        fetch(blobUrl).then(response => response.blob()).then(blob => {
          this.uploadAudio(blob);
        });
      });
    },

[katspaugh]

Your code looks correct. On my computer it’s also not instant when it activates the mic and starts recording. I think it’s normal. Perhaps showing a loader would make it feel smoother.

[visualight]

Thank you for your reply.

In order to avoid too much latency, is there a method with the record plugin to end a recording but leave the microphone active so that when the recording is reactivated, it is more fluid and responsive ?

Thanks

[katspaugh]

There's no such feature atm, but it should be possible to add.
The stream can be kept intact and not created each time:
https://github.com/katspaugh/wavesurfer.js/blob/main/src/plugins/record.ts#L106-L111

Maybe even the MediaRecord object could be cached. I'm not sure if it's reusable.