如何在 Javascript 数组中存储实时数据？

如何解决如何在 Javascript 数组中存储实时数据？

我想在电脑上听麦克风并显示波形以查看数据。 data 是一个包含麦克风输入的数组。所以我需要获取麦克风输入并将主题实时存储在数据数组中。当我尝试将麦克风输入数据存储在 *一个简单的数组中时，我发现我的音频和可视化之间存在差距。我想我存储的麦克风输入不正确。

也许我需要使用缓冲区，但在这种情况下如何实现它？

当我点击播放按钮时触发

startStreaming() 函数：

import React,{ useState } from 'react';

let audioContext = null;
let meter = null;
let mediastreamsource = null;
let rafID = null;

function Dashboard(props) {

const [data,setData] = useState({[])

function startStreaming() {
    SpeechRecognition.startListening({ continuous: true });
        
    // monkeypatch Web Audio
    window.AudioContext = window.AudioContext || window.webkitaudiocontext;
            
    // grab an audio context
    audioContext = new AudioContext();
    
    navigator.mediaDevices.getUserMedia({
            audio: true,video: true
        }).then(function (stream) {
            onMicrophoneGranted(stream);
            .............
            .............
          },function (err) {
            alert('Could not acquire media: ' + err);
        });
}

function onMicrophoneGranted(stream) {
        audioContext.resume();
        // Create an AudioNode from the stream.
        mediastreamsource = audioContext.createmediastreamsource(stream);

        // Create a new volume meter and connect it.
        meter = createAudioMeter(audioContext);
        mediastreamsource.connect(meter);

        // kick off the visual updating
        onLevelChange();
    }
    function onLevelChange( ) {

        setData( [...data,meter.volume] )
        // set up the next visual callback
        rafID = window.requestAnimationFrame( onLevelChange );
    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

返回的组件

    return(
        <div className="waves-wrapper">
        {
          data.map( (val,i) => <div key={`div-${i}`} ></div> )
        }
        </div>
    )