lyf2000 · October 13, 2024 10:15
diff --git a/page.hmtl b/page.hmtl
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Recorder</title>
    <link rel="stylesheet" href="style.css">
 </head>

 <body>
    <div class="container">
        <h1>Voice Recorder</h1>
        <div class="recorder">
            <button id="recordBtn" class="button record">Record</button>
            <button id="stopBtn" class="button stop" disabled>Stop</button>
            <audio id="audioPlayback" controls></audio>
            <button id="sendBtn" class="button send" disabled>Send to Server</button>
        </div>
        <p id="statusMessage"></p>
    </div>

    <!-- <script src="app.js"></script> -->
    <script>

        let mediaRecorder;
        let audioChunks = [];
        let audioBlob;

        const sendBtn = document.getElementById('sendBtn');
        sendBtn.disabled = true;

        const recordBtn = document.getElementById('recordBtn');
        const stopBtn = document.getElementById('stopBtn');
        const audioPlayback = document.getElementById('audioPlayback');
        const statusMessage = document.getElementById('statusMessage');

        recordBtn.addEventListener('click', () => {
            navigator.mediaDevices.getUserMedia({ audio: true })
                .then(stream => {
                    mediaRecorder = new MediaRecorder(stream);

                    mediaRecorder.addEventListener("stop", () => {
                        // ... (existing code)
                        sendBtn.disabled = false;
                    });
                    mediaRecorder.start();

                    audioChunks = [];
                    recordBtn.disabled = true;
                    stopBtn.disabled = false;
                    statusMessage.textContent = "Recording...";

                    mediaRecorder.addEventListener("dataavailable", event => {
                        audioChunks.push(event.data);
                    });

                    mediaRecorder.addEventListener("stop", () => {
                        audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
                        const audioUrl = URL.createObjectURL(audioBlob);
                        audioPlayback.src = audioUrl;
                        statusMessage.textContent = "Recording complete. Click play to listen.";
                        recordBtn.disabled = false;
                        stopBtn.disabled = true;
                    });
                })
                .catch(error => {
                    console.error('Error accessing microphone:', error);
                    statusMessage.textContent = "Error: Unable to access microphone.";
                });
        });

        stopBtn.addEventListener('click', () => {
            if (mediaRecorder && mediaRecorder.state !== "inactive") {
                mediaRecorder.stop();
                statusMessage.textContent = "Recording stopped.";
            }
        });
        const socket = new WebSocket("ws://127.0.0.1:8000/api/realtime/stream");

        socket.onopen = () => {
            console.log("WebSocket connection established");
        };

        socket.onmessage = (event) => {
            console.log("Received message from server:", event.data);
            // Handle incoming messages from the server here
        };

        socket.onclose = () => {
            console.log("WebSocket connection closed");
        };

        sendBtn.addEventListener('click', () => {
            if (audioBlob) {
                const reader = new FileReader();
                reader.onloadend = () => {
                    // Client-side: Convert to base64
                    const base64Audio = btoa(reader.result);

                    const message = JSON.stringify({
                        text: { audio: base64Audio }
                    });
                    socket.send(message);
                    statusMessage.textContent = "Audio sent to server.";
                    sendBtn.disabled = true;
                };
                reader.readAsBinaryString(audioBlob);
            } else {
                statusMessage.textContent = "No audio recorded to send.";
            }
        });

    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Voice Recorder</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div class="container">
	<h1>Voice Recorder</h1>
	<div class="recorder">
	<button id="recordBtn" class="button record">Record</button>
	<button id="stopBtn" class="button stop" disabled>Stop</button>
	<audio id="audioPlayback" controls></audio>
	<button id="sendBtn" class="button send" disabled>Send to Server</button>
	</div>
	<p id="statusMessage"></p>
	</div>

	<!-- <script src="app.js"></script> -->
	<script>

	let mediaRecorder;
	let audioChunks = [];
	let audioBlob;

	const sendBtn = document.getElementById('sendBtn');
	sendBtn.disabled = true;

	const recordBtn = document.getElementById('recordBtn');
	const stopBtn = document.getElementById('stopBtn');
	const audioPlayback = document.getElementById('audioPlayback');
	const statusMessage = document.getElementById('statusMessage');

	recordBtn.addEventListener('click', () => {
	navigator.mediaDevices.getUserMedia({ audio: true })
	.then(stream => {
	mediaRecorder = new MediaRecorder(stream);

	mediaRecorder.addEventListener("stop", () => {
	// ... (existing code)
	sendBtn.disabled = false;
	});
	mediaRecorder.start();

	audioChunks = [];
	recordBtn.disabled = true;
	stopBtn.disabled = false;
	statusMessage.textContent = "Recording...";

	mediaRecorder.addEventListener("dataavailable", event => {
	audioChunks.push(event.data);
	});

	mediaRecorder.addEventListener("stop", () => {
	audioBlob = new Blob(audioChunks, { type: 'audio/mp3' });
	const audioUrl = URL.createObjectURL(audioBlob);
	audioPlayback.src = audioUrl;
	statusMessage.textContent = "Recording complete. Click play to listen.";
	recordBtn.disabled = false;
	stopBtn.disabled = true;
	});
	})
	.catch(error => {
	console.error('Error accessing microphone:', error);
	statusMessage.textContent = "Error: Unable to access microphone.";
	});
	});

	stopBtn.addEventListener('click', () => {
	if (mediaRecorder && mediaRecorder.state !== "inactive") {
	mediaRecorder.stop();
	statusMessage.textContent = "Recording stopped.";
	}
	});
	const socket = new WebSocket("ws://127.0.0.1:8000/api/realtime/stream");

	socket.onopen = () => {
	console.log("WebSocket connection established");
	};

	socket.onmessage = (event) => {
	console.log("Received message from server:", event.data);
	// Handle incoming messages from the server here
	};

	socket.onclose = () => {
	console.log("WebSocket connection closed");
	};

	sendBtn.addEventListener('click', () => {
	if (audioBlob) {
	const reader = new FileReader();
	reader.onloadend = () => {
	// Client-side: Convert to base64
	const base64Audio = btoa(reader.result);

	const message = JSON.stringify({
	text: { audio: base64Audio }
	});
	socket.send(message);
	statusMessage.textContent = "Audio sent to server.";
	sendBtn.disabled = true;
	};
	reader.readAsBinaryString(audioBlob);
	} else {
	statusMessage.textContent = "No audio recorded to send.";
	}
	});

	</script>
	</body>

	</html>