VueJS 3, Wavesurfer.js + microphone

Hello! I tried to create an app based on VueJS3 and Wavesurfer.js that would visualize microphone input. Unfortunately, microphone plugin does not work. I can load audio using this.waveRecorder.load('https://wavesurfer-js.org/example/media/demo.wav'), and in this case, wavesurfer will work. But, if I use microphone plugin, I can’t see visualization of microphone input.

I have codepen.

And there is another thing. If I load audio using this.waveRecorder.load('https://wavesurfer-js.org/example/media/demo.wav'), and change stop_recording method to

stop_recording() {
      this.isRecording = false;
      this.waveRecorder.playPause();
}

microphone plugin will work, after the second attempt to turn on (The loaded file will reset). And this also will reduce canvas refresh time.

[markitantov]

The microphone plugin doesn’t work anyway.

That’s a bold statement, it works fine for me.

change waveRecorder.microphone.stop();

I have no idea what waveRecorder is or looks like.

I uploaded code to codepen in the post upper. If you don’t see this, I will attach code here.

var MicrophonePlugin = window.WaveSurfer.microphone;

var startBtn = document.querySelector('.start');
var stopBtn = document.querySelector('.stop');

var waveRecorder = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#000000',
  barWidth: 2,
  barHeight: 1,
  barGap: null,
  plugins: [MicrophonePlugin.create()]
});

startBtn.addEventListener("click", function() {
  waveRecorder.microphone.start();
});


stopBtn.addEventListener("click", function() {
  waveRecorder.microphone.stop();
});

I use this code and I don’t know, why microphone plugin doesn’t work. Any suggestions?

[fareesh]

Perhaps a browser restriction that requires user input before accessing the microphone is cascading down into the way the plugin captures the audio, and thus preventing it from capturing unless the code executes in the context of a click.