用户记录的音频Blob保存在哪里? (JavaScript)

时间:2019-01-27 16:29:52

标签: javascript reactjs html5-audio audio-recording web-audio

我刚刚成功编写了一小段代码,记录了用户的语音并在浏览器中再次播放。我正在使用第三方库,所以不是值得赞扬的。但是,我想了解这些斑点实际上保存在哪里?我可以录制几张?它们是在用户计算机上 还是在Web服务器上

我正在使用react-mic进行录制,我的代码如下所示:

import React, { Component } from 'react'
import { ReactMic } from 'react-mic';

export default class Recorder extends Component {
    constructor(props) {
        super(props);
        this.state = {
          record: false,
          url: ""
        }
      }

      startRecording = () => {
        this.setState({
          record: true
        });
      }

      stopRecording = () => {
        this.setState({
          record: false
        });
      }

      onData(recordedBlob) {
        console.log('chunk of real-time data is: ', recordedBlob);
      }

      onStop(recordedBlob) {
        console.log('recordedBlob is: ', recordedBlob);
        this.setState({url: recordedBlob.blobURL});
      }

      render() {
        return (
          <div>
            <ReactMic
              record={this.state.record}
              className="sound-wave"
              onStop={(blob)=>this.onStop(blob)}
              onData={(blob)=>this.onData(blob)}
              strokeColor="#000000"
              backgroundColor="#FF4081" />
            <button onClick={this.startRecording} type="button">Start</button>
            <button onClick={this.stopRecording} type="button">Stop</button>

            <audio
                controls
                src={this.state.url}>
                    Your browser does not support the
                    <code>audio</code> element.
            </audio>
          </div>
        );
      }
}

0 个答案:

没有答案