Closed markitantov closed 3 years ago
There is no stopRecording
method in wavesurfer. First try reproducing the issue without vue.js.
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).
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.
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?
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();
}
});
});
Why is it initialized only in the onclick method?
It's an example. Use whatever works for you?
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.
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.
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 tomicrophone plugin will work, after the second attempt to turn on (The loaded file will reset). And this also will reduce canvas refresh time.