将音频从 ReactMediaRecorder 发送到服务器答案

【问题标题】：Send audio from ReactMediaRecorder to a server将音频从 ReactMediaRecorder 发送到服务器
【发布时间】：2020-01-07 06:36:35
【问题描述】：

我正在尝试编写一个客户端，它可以记录音频数据，然后将其发送到服务器。

我没有太多前端开发经验。我被告知要使用 React，所以我正在尝试使用 ReactMediaRecorder (https://github.com/avasthaathraya/react-media-recorder)。


  render () {
        return (
            <ReactMediaRecorder
                audio
                whenStopped={blobUrl=>this.setState({audio: blobUrl })}
                render={({startRecording, stopRecording, mediaBlob }) => (
                    <div>
                        <button id="recorder" className="button" onClick={startRecording}>Start Recording</button>
                        <button className="button" onClick={() => {stopRecording();this.upload()}}>Stop Recording</button>
                        <audio id="player" src={mediaBlob} controls />
                    </div>
                )}
            />
        )
    }



    upload() {
        console.log("upload was called with blob " + this.state.audio)
        //if (false) {
        if (this.state.audio != null) {
            console.log("got here, type of audio is " + this.state.audio)


            var xhr = new XMLHttpRequest();
            var filename = new Date().toISOString();
            xhr.onload = function (e) {
                if (this.readyState === 4) {
                    console.log("Server returned: ", e.target.responseText);
                }
            };
            var fd = new FormData();
            fd.append("audio_data", this.state.audio, filename);
            xhr.open("POST", "http://127.0.0.1:3000", true);
            xhr.send(fd);
        }
    }

起初看起来很简单。但我不明白为什么我不能发送 mediaBlob。 formData.append 表示 this.state.audio 不是 Blob 类型。所以我在控制台日志中检查了它的类型，发现它的类型是stringContent。我试图通过使用new Blob() 来创建一个 Blob，但失败了。我也找不到这种类型的信息。

有人知道该怎么做吗？

【问题讨论】：

标签： javascript reactjs audio xmlhttprequest blob

【解决方案1】：

好吧，我终于明白了。错误在于，mediaBlob 实际上不是 blob，而是 blob Url。所以首先我们需要加载它，然后我们可以发送它。我将上传功能更改为：

upload(mediaBlob) {
    if (this.state.audio != null) {
        //load blob
        var xhr_get_audio = new XMLHttpRequest();
        xhr_get_audio.open('GET', mediaBlob, true);
        xhr_get_audio.responseType = 'blob';
        xhr_get_audio.onload = function(e) {
            if (this.status == 200) {
                var blob = this.response;
                //send the blob to the server
                var xhr_send = new XMLHttpRequest();
                var filename = new Date().toISOString();
                xhr_get_audio.onload = function (e) {
                    if (this.readyState === 4) {
                        console.log("Server returned: ", e.target.responseText);
                    }
                };
                var fd = new FormData();
                fd.append("audio_data",blob, filename);
                xhr_send.open("POST", "http://localhost/uploadAudio", 
                true);
                xhr_send.send(fd);
            }
        };
        xhr_get_audio.send();
    }
}

现在可以正常使用了。

【讨论】：