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