Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

stop() listener doesn't trigger

See original GitHub issue

I’m using recorder in React in conjunction with wavesurfer.js to show the waves of recording and then create a player to listen the recording

// in App.tsx
import { register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';
useEffect(() => {
    async function init() {
      await register(await connect());
  }, []);

// in component file
import { IMediaRecorder, MediaRecorder } from 'extendable-media-recorder';
class ComponentName extends Component<props, state>{
  waveSurfer?: WaveSurfer;
  mediaRecorder?: IMediaRecorder;
  async componentDidUpdate(prevProps: SamplePageProps, prevState: SamplePageState) {
    // recording state tracks the clicks on record button
    if (this.state.recording && !prevState.recording) {
    // Initializing wavesurfer to show waves
      this.waveSurfer = WaveSurfer.create({
        container: '#waveform',
        height: 38,
        waveColor: '#666666',
        barWidth: 1,
        interact: false,
        barHeight: 34,
        plugins: [MicrophonePlugin.create()],
      const audioChunks: any[] = [];
      this.waveSurfer.microphone.on('deviceReady', stream => {
        this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
        if (!this.mediaRecorder) return;
        this.mediaRecorder.addEventListener('dataavailable', (event: any) => {

          () => {
            // doesn't trigger
            console.log('stop', audioChunks);
            const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
            const audioUrl = URL.createObjectURL(audioBlob);
            this.addNewRecord({ id: this.state.recordedSamples.length, audioUrl, selected: false, blob: audioBlob });
  toggleRecording = () => {
    if (this.state.recording) {
      if (!this.waveSurfer || !this.mediaRecorder) return;
      // prints correct mediarecorder object with all the methods
      console.log('this mediarecorder', this.mediaRecorder);
      this.props.logEvent('Stop sample recording', {
        url: this.props.location.pathname,

When I click the button to stop recording, toggleRecording function works as it should, but console log in stop listener doesn’t print, and nothing described there works. The same setup with opus-media-recorder works as it should, but I find your library more convenient to use, would appreciate any tips 😃

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

chrisguttandincommented, May 18, 2021

Hi @mylnikovD, thanks for raising that issue. The sad answer is that the stop event hasn’t been implemented yet. It should be fairly straightforward to add it though. I will try to do it on the weekend.

chrisguttandincommented, May 22, 2021

Version 6.3.0 does now fire a stop event.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prevent new EventListener from triggering for event that ...
If an EventListener is added to an EventTarget while it is processing an event, that event does not trigger the listener.
Read more >
How to prevent an event from unintentionally triggering ...
In the child element, add this to the event listener: event.stopPropagation();. If you need to see an example, check out this site here....
Read more >
Event listeners not working? 3 key areas to troubleshoot
Are your event listeners not working as you'd expect? Here are 3 key areas to troubleshoot to help you get everything triggering as...
Read more >
EventTarget.removeEventListener() - Web APIs | MDN
The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.
Read more >
When a Click is Not Just a Click | CSS-Tricks
The click event is usually tied to a pointer device, typically the mouse, and yet here the Space or Enter key are triggering...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found