反应：在两个事件处理程序之间传递音频数据

Question

我正在尝试制作一个简单的React应用程序，您可以在其中录制音频片段并进行播放。 我可以使用记录功能，但不确定如何将数据传递给我的停止onclick。 这是我到目前为止的内容：

 export default class SongRecorder extends React.Component{ constructor(){ super(); this.state = { record: false, songData: {} } this.recordSong = this.recordSong.bind(this); this.stopRecord = this.stopRecord.bind(this); } recordSong(e){ e.preventDefault(); navigator.mediaDevices.getUserMedia({ audio: true }) .then(function(stream){ const recorder = new MediaRecorder(stream); recorder.start(); console.log(recorder.state);//this will tell us if recording is happening or not console.log("recorder started"); //as recording happens, we need to collect the audio data with ondataavailable const chunks = []; recorder.ondataavailable = function(e){ chunks.push(e.data); } }) this.setState({ record: true, }) } stopRecord(e){ e.preventDefault(); this.setState({ record: false, }) } 

我试图在recordSong中编写一个if语句，以便将record设置为false时，它将停止录音机并将songData设置为块，但是我认为这没有用。

 function stop(recorder){ if(this.state.record === false){ recorder.stop(); this.setState({ songData: chunks }) } }; 

Answer 1

再创建1个称为chunks状态，然后在响应中设置块：

  recordSong(e){
        e.preventDefault();
        navigator.mediaDevices.getUserMedia({
            audio: true
        })
        .then(function(stream){
            const recorder = new MediaRecorder(stream);
            recorder.start();
            console.log(recorder.state);//this will tell us if recording is happening or not
            console.log("recorder started");
            //as recording happens, we need to collect the audio data with ondataavailable
            recorder.ondataavailable = function(e){

                    this.setState({chunks:chunks.push(e.data)});
                }
            })

            this.setState({
                record: true,
            })
        }


function stop(recorder){
    if(this.state.record === false){
        recorder.stop();
        this.setState({
            songData: this.state.chunks
        })
    }
};