Untitled
unknown
plain_text
a month ago
2.7 kB
1
Indexable
Never
const AudioRecorder = () => { const [isRecording, setIsRecording] = useState(false); const mediaRecorder = useRef(null); const [transcript, setTranscript] = useState(""); const live = async () => { setIsRecording(true); const deepgramApiKey = ""; const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorder.current = new MediaRecorder(stream, { mimeType: 'audio/webm' }); mediaRecorder.current.start(1000); const deepgram = createClient(deepgramApiKey); // Create a websocket const connection = deepgram.listen.live({ smart_format: true, model: 'nova-2', language: 'en-GB', }); // Listen for the connection to open. connection.on(LiveTranscriptionEvents.Open, () => { console.log("Connection opened."); // Listen for any transcripts received mediaRecorder.current.ondataavailable = (event) => { if (event.data.size > 0) { console.log("sending data to Deepgram") connection.send(event.data); } }; connection.on(LiveTranscriptionEvents.Transcript, (data) => { console.log(`Transcript received`); console.dir(data, { depth: null }); let newTranscript = data.channel.alternatives[0].transcript console.log("transcript:", transcript) setTranscript((prev) => prev + " " + newTranscript); }); // Listen for any metadata received from Deepgram connection.on(LiveTranscriptionEvents.Metadata, (data) => { console.dir(data, { depth: null }); }); // Listen for the connection to close. connection.on(LiveTranscriptionEvents.Close, () => { console.log("Connection closed."); }); }); }; const stopRecording = () => { setIsRecording(false); if (mediaRecorder.current) { mediaRecorder.current.stop(); mediaRecorder.current.stream.getTracks().forEach(track => track.stop()); } }; return ( <div> <div style={{ border: '1px solid black', padding: '10px', marginBottom: '10px', height: '100px', overflowY: 'auto' }}> {transcript} </div> <button onClick={live} type="button" disabled={isRecording}>Start Recording</button> <button onClick={stopRecording} type="button" disabled={!isRecording}>Stop Recording</button> </div> ); }; export default AudioRecorder;
Leave a Comment