document.addEventListener('DOMContentLoaded', function() { const recordButton = document.getElementById('recordButton'); const statusDisplay = document.getElementById('status'); let mediaRecorder; let audioChunks = []; let recordingTimer; let recordingStartTime; // Check for recording support if (!navigator.mediaDevices || !window.MediaRecorder) { statusDisplay.textContent = "Voice recording not supported in this browser."; recordButton.disabled = true; return; } // Button event handlers recordButton.addEventListener('mousedown', startRecording); recordButton.addEventListener('touchstart', startRecording); recordButton.addEventListener('mouseup', stopRecording); recordButton.addEventListener('touchend', stopRecording); recordButton.addEventListener('mouseleave', stopRecording); async function startRecording(e) { e.preventDefault(); 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' }); await uploadRecording(audioBlob); audioChunks = []; stream.getTracks().forEach(track => track.stop()); }; audioChunks = []; mediaRecorder.start(); recordingStartTime = Date.now(); // Visual feedback recordButton.classList.add('recording'); startTimer(); } catch (error) { console.error("Recording failed:", error); statusDisplay.textContent = "Error accessing microphone. Please check permissions."; } } function stopRecording() { if (mediaRecorder && mediaRecorder.state === 'recording') { mediaRecorder.stop(); clearInterval(recordingTimer); recordButton.classList.remove('recording'); statusDisplay.textContent = "Processing your recording..."; } } function startTimer() { clearInterval(recordingTimer); recordingTimer = setInterval(() => { const seconds = Math.floor((Date.now() - recordingStartTime) / 1000); statusDisplay.textContent = `Recording: ${seconds}s (max 30s)`; if (seconds >= 30) { stopRecording(); } }, 1000); } async function uploadRecording(audioBlob) { try { // Generate unique filename const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const filename = `voice-message-${timestamp}.wav`; // Upload to Firebase Storage const storageRef = storage.ref().child('voice-messages/' + filename); await storageRef.put(audioBlob); // Get download URL const downloadURL = await storageRef.getDownloadURL(); // Here you would typically send this URL to your backend // to create a new CMS item. For Webflow, you might use: // 1. Webflow's native form to submit the data // 2. A third-party service like Zapier to create the CMS item // 3. Webflow's API if you have API access statusDisplay.textContent = "Message sent successfully!"; // For demo purposes, we'll just show the URL console.log("Audio available at:", downloadURL); } catch (error) { console.error("Upload failed:", error); statusDisplay.textContent = "Failed to send message. Please try again."; } } });