Мне просто удалось написать небольшой фрагмент кода, который записывает голос пользователя и воспроизводит его снова в браузере.Я использую стороннюю библиотеку, так что это не так похвально.Тем не менее, я хотел бы понять, где эти капли на самом деле сохраняются?Сколько из них я могу записать?Будут ли они на компьютере пользователя или на веб-сервере ?
Я использую 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>
);
}
}