The goal is to receive audio from the users microphone to and store that audio on a database. To do this, we first need to ask the user, in their browser if we can use their microphone.
const [trackOne, setTrackOne] = useState( { isRecording: false, blobURL: '', isBlocked: false, }) // one time check for mic permissions useEffect(() => { navigator.getUserMedia({ audio: true }, () => { console.log('Permission Granted'); setTrackOne({ isBlocked: false }); }, () => { console.log('Permission Denied'); setTrackOne({ isBlocked: true }) }, ); }, []) Once permission is granted, a function can be called to start the recording.
const startOne = (e) => { if (trackOne.isBlocked) { console.log('Permission Denied'); } else { Mp3Recorder .start() .then(() => { setTrackOne({ isRecording: true }); }).catch((e) => console.error(e)); } }; In order to stop the recording a function must be called that stops the recording.
const stopOne = () => { Mp3Recorder .stop() .getMp3() .then(([buffer, blob]) => { const file = new File(buffer, 'track-one.mp3', { type: audioType }) setAudioData(file) const blobURL = URL.createObjectURL(blob) setTrackOne({ blobURL, isRecording: false }) }) } Then a useEffect can be used to post the data whenever the stop button is clicked.
const formData = new FormData() formData.append('audio_data', audioData) useEffect(()=>{ fetch('/tracks', { method: 'POST', body: formData, }) .then((r) => { if (r.ok) { fetch('/tracks') .then(r => r.json()) .then(data => setAllTracks(data)) } }) }, [audioData]) The included fetch GET request at the end is to immediately render the new track.
libraries involved:
import MicRecorder from 'mic-recorder-to-mp3';
important
A bit rate must be set in your audio recording component
const Mp3Recorder = new MicRecorder({ bitRate: 128 });
Top comments (0)