Untitled

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;