doppelgunner / audio-react-recorder

Audio / Voice Recorder for ReactJS using Web Audio API
49 stars 42 forks source link

The File Size is too large #5

Open yeganehaym opened 3 years ago

yeganehaym commented 3 years ago

The file size is too large, almost every 10 seconds gets 2MB. even change the type like "audio/amr" or "audio/mp3" has nothing effects on size

persistentWeb commented 3 years ago

I am also facing same issue. 5 seconds recording is 1.5 MB. Did you find the solution? There is no response from developer. I hope you found the fix in this duration. If yes, could you please tell me the solution.

Thanks in Advance. Regards, Shivraj

yeganehaym commented 3 years ago

there are more side effects in this library i'm using another lib

import React from 'react'; const audioType = 'audio/*';

class RecordingAPI extends React.Component { constructor(props) { super(props); this.state = { recording: false, audios: [], }; }

async componentDidMount() { const stream = await navigator.mediaDevices.getUserMedia({audio: true});

// init recording
this.mediaRecorder = new MediaRecorder(stream);
// init data storage for video chunks
this.chunks = [];
// listen for data from media recorder
this.mediaRecorder.ondataavailable = e => {
  if (e.data && e.data.size > 0) {
    this.chunks.push(e.data);
  }
};

}

// eslint-disable-next-line no-dupe-class-members componentDidUpdate(prevProps,prevState) {

if(prevProps.RecordState!=this.props.RecordState) {
  if(this.props.RecordState==0 && this.state.recording)
  {
    this.stopRecording();
  }
  else if(this.props.RecordState==1 && !this.state.recording)
  {

    this.startRecording();
  }
}

}

startRecording() { // wipe old data chunks this.chunks = []; // start recorder with 10ms buffer this.mediaRecorder.start(10); // say that we're recording this.setState({recording: true}); }

stopRecording() { // stop the recorder this.mediaRecorder.stop(); // say that we're not recording this.setState({recording: false}); // save the video to memory this.saveAudio(); }

saveAudio() { // convert saved chunks to blob const blob = new Blob(this.chunks, {type: audioType}); // generate video url from blob const audioURL = window.URL.createObjectURL(blob); this.props.onComplete({blob,url: audioURL});

// append videoURL to list of saved videos for rendering
const audios = this.state.audios.concat([audioURL]);
this.setState({audios});

}

deleteAudio(audioURL) { // filter out current videoURL from the list of saved videos const audios = this.state.audios.filter(a => a !== audioURL); this.setState({audios}); }

render() { const {recording, audios} = this.state;

return (
  <>
  </>
);

} } export default RecordingAPI

seanaguinaga commented 3 years ago

@yeganehaym can you send me the repo you are using this code in? ^^

yeganehaym commented 3 years ago

the code in mention in prv post