Wavesurfer 麦克风无法在 React

问题描述

我正在尝试在我的 React 应用程序中使用 WaveSurfer 麦克风插件，但我遇到了波形随机显示的问题。有时它们没有正确生成，它们是不可见的，但成功生成了 wave html。那真的很奇怪，因为它似乎我按照其文档进行了所有操作。我试图用 ref 替换 #wave 表单容器，但它没有帮助。

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>
    </>
);

};

导出默认 withTheme(Recording);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）