I followed the example and created a recording modal for my app. After recording the audio clip it plays fine for the first time only. Playing the clip again does not play the clip. Not able to understand what's going wrong.
constructor(props) {
super(props);
this.state = {
playPauseButton: null,
recordButton: null,
stopButtonDisabled: true,
playButtonDisabled: true,
recordButtonDisabled: true,
progress: 0,
error: null,
audioFileName: props.audioFileName
};
}
componentWillMount() {
this.progressInterval = setInterval(() => {
if (this.player && this.shouldUpdateProgressBar()) {
this.setState({ progress: Math.max(0, this.player.currentTime) / this.player.duration });
}
}, 100);
}
componentWillReceiveProps(nextProps) {
//reset the statusSelected every time the component becomes visible
if (nextProps.resetRecorder) {
this.setState({
playPauseButton: null,
recordButton: null,
stopButtonDisabled: true,
playButtonDisabled: true,
recordButtonDisabled: true,
progress: 0,
error: null,
audioFileName: nextProps.audioFileName
});
this.player = null;
this.recorder = null;
this.lastSeek = 0;
this.reloadPlayer(nextProps.audioFileName);
this.reloadRecorder(nextProps.audioFileName);
}
}
componentWillUnmount() {
clearInterval(this.progressInterval);
}
shouldUpdateProgressBar() {
// Debounce progress bar update by 200 ms
return moment().valueOf() - this.lastSeek > 200;
}
updateState() {
this.setState({
playPauseButton: this.player && this.player.isPlaying ? 'pause' : 'play',
recordButton: this.recorder && this.recorder.isRecording ? 'stop' : 'circle',
stopButtonDisabled: !this.player || !this.player.canStop,
playButtonDisabled: !this.player || !this.player.canPlay || this.recorder.isRecording,
recordButtonDisabled: !this.recorder || (this.player && !this.player.isStopped),
});
}//end of updateState
playPause() {
this.player.playPause((err, playing) => {
if (err) {
this.setState({
error: err.message
});
}
this.updateState();
});
}//end of playPause
stop() {
this.player.stop(() => {
this.updateState();
});
}//end fo stop
reloadPlayer(audioFileName) {
if (this.player) {
this.player.destroy();
}
this.player = new Player(audioFileName, {
autoDestroy: false
}).prepare((err) => {
if (err) {
this.setState({
error: err.message
});
}
this.updateState();
});
this.updateState();
this.player.on('ended', () => {
this.updateState();
});
this.player.on('pause', () => {
this.updateState();
});
}//end of reloadPlayer
reloadRecorder(audioFileName) {
if (this.recorder) {
this.recorder.destroy();
}
this.recorder = new Recorder(audioFileName, {
bitrate: 128000,
channels: 2,
sampleRate: 44100,
quality: 'medium',
}).prepare((err, fsPath) => {
console.log('reloadRecorder recorder prepare fsPath', fsPath);
if (err) {
this.setState({
error: err.message
});
}
this.updateState();
});
this.updateState();
}//end of reloadRecorder
toggleRecord() {
if (this.player) {
this.player.destroy();
}
this.recorder.toggleRecord((err, stopped) => {
if (err) {
console.log(err);
this.setState({
error: err.message
});
}
if (stopped) {
this.reloadPlayer(this.state.audioFileName);
this.reloadRecorder(this.state.audioFileName);
}
this.updateState();
});
}//end of toggleRecord
seek(percentage) {
if (!this.player) {
return;
}
this.lastSeek = moment().valueOf();
const position = percentage * this.player.duration;
this.player.seek(position, () => {
this.updateState();
});
}//end of seek
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
