Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const startButton = document.getElementById('start-recording');
+ const stopButton = document.getElementById('stop-recording');
+ const statusElement = document.getElementById('status');
+ const chatMessages = document.getElementById('chat-messages');
+ let mediaRecorder;
+ let audioChunks = [];
+
+ // Check for browser support
+ if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+ statusElement.textContent = 'Voice recording not supported in this browser';
+ startButton.disabled = true;
+ return;
+ }
+
+ startButton.addEventListener('click', async () => {
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ mediaRecorder = new MediaRecorder(stream);
+
+ mediaRecorder.ondataavailable = (event) => {
+ audioChunks.push(event.data);
+ };
+
+ mediaRecorder.onstop = async () => {
+ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+ audioChunks = [];
+
+ // Add user message to chat
+ addMessageToChat('user', 'User audio recorded');
+
+ // Simulate AI response (in real app, would send to backend)
+ setTimeout(() => {
+ addMessageToChat('ai', 'AI response would go here');
+ }, 1000);
+ };
+
+ mediaRecorder.start();
+ startButton.disabled = true;
+ stopButton.disabled = false;
+ statusElement.textContent = 'Recording... Click stop when finished.';
+ } catch (err) {
+ console.error('Error accessing microphone:', err);
+ statusElement.textContent = 'Error accessing microphone';
+ }
+ });
+
+ stopButton.addEventListener('click', () => {
+ if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+ mediaRecorder.stop();
+ startButton.disabled = false;
+ stopButton.disabled = true;
+ statusElement.textContent = 'Click microphone to start speaking';
+ }
+ });
+
+ function addMessageToChat(sender, text) {
+ const messageDiv = document.createElement('div');
+ messageDiv.className = `message ${sender}`;
+ messageDiv.textContent = `${sender === 'user' ? '👤' : '🤖'} ${text}`;
+ chatMessages.appendChild(messageDiv);
+ chatMessages.scrollTop = chatMessages.scrollHeight;
+ }
+ });
