reactjs - Wavesurfer microphone is not displaying correctly in React

Question

Im trying to use WaveSurfer microphone plugin in my React app but I've got problem that waves are showing randomly. From time to time they are not generated correctly, they are invisible but wave html is generated succesfully. Thats really werid because its seems like I do everything as its documented. I tried to replace #wave form container with ref but it doesnt help.

import React from 'react'
import WaveSurfer from 'wavesurfer.js';
import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone';
import { withTheme } from 'styled-components';

const Recording = ({ theme }) => {
React.useEffect(() => {
    const waveSurfer = WaveSurfer.create({
        container: '#waveform',
        height: 200,
        waveColor: theme.palette.primary.main,
        interact: false,
        cursorWidth: 0,
        plugins: [
            MicrophonePlugin.create({
                container: '#waveform',
            }),
        ],
    });

    waveSurfer.microphone.on('deviceReady', function() {
        console.info('Device ready!');
    });

    waveSurfer.microphone.start();

    return () => {
        waveSurfer.microphone.stop();
        waveSurfer.destroy();
    };

}, [WaveSurfer, MicrophonePlugin]);

return (
    <>
        <div style={{ position: 'relative' }}>
            <div id="waveform" />
        </div>
    </>
);

};

export default withTheme(Recording);

question from:https://stackoverflow.com/questions/65935794/wavesurfer-microphone-is-not-displaying-correctly-in-react

Answer 1

Waitting for answers