VueJS 3, Wavesurfer.js + microphone

[markitantov]

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.

[thijstriemstra]

There is no stopRecording method in wavesurfer. First try reproducing the issue without vue.js.

[markitantov]

There is no stopRecording method in wavesurfer. First try reproducing the issue without vue.js.

It was my method of onClick event of VueJS.

Ok, I reproduced the issue without vuejs. The microphone plugin doesn't work anyway.

And as I said if I will load file (waveRecorder.load('https://wavesurfer-js.org/example/media/demo.wav');) after initialization, and change waveRecorder.microphone.stop(); to waveRecorder.playPause(); in the click event of the stopBtn, the microphone plugin will work after the second attempt to start (of course, after stop method).

[thijstriemstra]

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.

[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?

[markitantov]

I figured out, microphone plugin works well, but here is the question. Why is it initialized only in the onclick method? I used code from documentation (https://wavesurfer-js.org/plugins/microphone.js) and it works well, but when I change it to this one (intialized wavesurfer on the DOMContentLoaded), the microphone plugin doesn't work:(

Here the not working code:

var wavesurfer;

// Init & load
document.addEventListener('DOMContentLoaded', function() {
    var startBtn = document.querySelector('.start');

    wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'black',
      interact: false,
      cursorWidth: 0,
      plugins: [WaveSurfer.microphone.create()]
    });

    startBtn.addEventListener("click", function() {
      // start/stop mic on button click
      if (wavesurfer.microphone.active) {
        wavesurfer.microphone.stop();
      } else {
        wavesurfer.microphone.start();
      }
    });
});

[thijstriemstra]

Why is it initialized only in the onclick method?

It's an example. Use whatever works for you?

[markitantov]

It works in the example, when wavesurfer initialized in onclick method. But it does not work, when I want to initialize wavesurfer and microphone plugin on page load method.

[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.