Open bootrino opened 1 week ago
Your README could have a better example that shows how to upload the recorded file and also shows file size and the mime type of the file.
This would be a big help to people considering this library.
import React, { useState } from 'react'; import { VoiceRecorder } from 'react-voice-recorder-player'; export function RecorderExample() { const [audioBlob, setAudioBlob] = useState<Blob | null>(null); const [fileDetails, setFileDetails] = useState({ type: '', size: 0 }); const styles = { mainContainerStyle: { backgroundColor: 'gray', border: '1px solid black', borderRadius: '5px', padding: '10px' }, controllerContainerStyle: { display: 'flex', justifyContent: 'space-between', marginTop: '10px' }, controllerStyle: { backgroundColor: 'white', border: '1px solid black', borderRadius: '5px', cursor: 'pointer', padding: '5px' }, waveContainerStyle: { height: '100px', marginTop: '10px', width: '100%' } }; const handleRecordingEnd = (blob: Blob) => { const { type, size } = blob; setFileDetails({ type, size }); setAudioBlob(blob); }; const getFileExtension = (mimeType: string) => { switch (mimeType) { case 'audio/webm': case 'audio/webm;codecs=opus': return 'webm'; case 'audio/mp4': case 'audio/mp4;codecs=mp4a.40.2': return 'mp4'; case 'audio/mpeg': return 'mp3'; case 'audio/ogg': case 'audio/ogg;codecs=opus': case 'audio/ogg;codecs=vorbis': return 'ogg'; case 'audio/wav': case 'audio/wave': case 'audio/x-wav': return 'wav'; case 'audio/x-matroska': return 'mka'; case 'audio/flac': return 'flac'; case 'audio/aac': return 'aac'; case 'audio/x-aac': return 'aac'; default: return 'webm'; // default to webm if unknown } }; const handleUpload = async () => { if (audioBlob) { const extension = getFileExtension(fileDetails.type); const fileName = `recording.${extension}`; const formData = new FormData(); formData.append('file', audioBlob, fileName); try { const response = await fetch('/upload', { method: 'POST', body: formData, }); if (response.ok) { console.log('File uploaded successfully'); } else { console.error('Failed to upload file'); } } catch (error) { console.error('Error uploading file:', error); } } }; return ( <div> <VoiceRecorder mainContainerStyle={styles.mainContainerStyle} controllerContainerStyle={styles.controllerContainerStyle} controllerStyle={styles.controllerStyle} waveContainerStyle={styles.waveContainerStyle} onRecordingEnd={handleRecordingEnd} /> {audioBlob && ( <div> <button onClick={handleUpload} style={styles.controllerStyle}> Upload </button> <div> <p>File Type: {fileDetails.type}</p> <p>File Size: {(fileDetails.size / 1024).toFixed(2)} KB</p> </div> </div> )} </div> ); }
Your README could have a better example that shows how to upload the recorded file and also shows file size and the mime type of the file.
This would be a big help to people considering this library.