Update game build from GitLab CI

server/static/index.html

@@ -17,56 +17,85 @@
         // URL of the server to send audio chunks
         const serverUrl = "./api/process"
 
-        // Check if browser supports audio recording
-        if (!navigator.mediaDevices?.getUserMedia) {
-            console.error('Your browser does not support audio recording.')
-            alert('Your browser does not support audio recording. Please try using a modern browser like Chrome, Firefox, or Edge.')
-            throw new Error('Audio recording not supported')
-        }
+        // Check server availability first
+        fetch("./api/data", {
+            method: 'GET'
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Server check failed: ${response.status}`)
+                }
+                console.log('Server check successful')
+                setupAudioRecording()
+            })
+            .catch(error => {
+                console.error('Server check failed:', error)
+                alert('Could not connect to the server. Please try again later.')
+                throw error
+            })
 
-        // Set up audio recording
-        navigator.mediaDevices.getUserMedia({ audio: true })
-            .then(stream => {
-                const audioContext = new (window.AudioContext || window.webkitAudioContext)()
-                const mediaRecorder = new MediaRecorder(stream)
-                const audioChunks = []
+        // Move existing audio setup into a function
+        function setupAudioRecording() {
+            // Check if browser supports audio recording
+            if (!navigator.mediaDevices?.getUserMedia) {
+                console.error('Your browser does not support audio recording.')
+                alert('Your browser does not support audio recording. Please try using a modern browser like Chrome, Firefox, or Edge.')
+                throw new Error('Audio recording not supported')
+            }
 
-                mediaRecorder.ondataavailable = event => {
-                    audioChunks.push(event.data)
-                }
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    const audioContext = new (window.AudioContext || window.webkitAudioContext)()
+                    const mediaRecorder = new MediaRecorder(stream)
+                    const audioChunks = []
 
-                mediaRecorder.onstop = () => {
-                    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
-                    audioChunks.length = 0 // Clear chunks after creating the Blob
+                    mediaRecorder.ondataavailable = event => {
+                        audioChunks.push(event.data)
+                    }
 
-                    // Send the audio chunk to the server
-                    const formData = new FormData()
-                    formData.append('audio', audioBlob)
+                    mediaRecorder.onstop = () => {
+                        const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
+                        audioChunks.length = 0 // Clear chunks after creating the Blob
 
-                    fetch(serverUrl, {
-                        method: 'POST',
-                        body: formData
-                    }).then(response => {
-                        console.log('Audio chunk sent successfully')
-                    }).catch(error => {
-                        console.error('Error sending audio chunk:', error)
-                    })
-                }
+                        // Convert Blob to base64
+                        const reader = new FileReader()
+                        reader.readAsDataURL(audioBlob)
+                        reader.onloadend = () => {
+                            // Extract the base64 data (remove the data URL prefix)
+                            const base64Audio = reader.result.split(',')[1]
 
-                // Start recording in intervals
-                const chunkInterval = 300 // Chunk duration in milliseconds
-                setInterval(() => {
-                    if (mediaRecorder.state === 'recording') {
-                        mediaRecorder.stop()
-                        mediaRecorder.start()
-                    } else {
-                        mediaRecorder.start()
+                            // Send as JSON with base64-encoded audio
+                            fetch(serverUrl, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({
+                                    audio_chunk: base64Audio
+                                })
+                            }).then(response => {
+                                console.log('Audio chunk sent successfully')
+                            }).catch(error => {
+                                console.error('Error sending audio chunk:', error)
+                            })
+                        }
                     }
-                }, chunkInterval)
-            })
-            .catch(error => {
-                console.error('Error accessing microphone:', error)
-            });
+
+                    // Start recording in intervals
+                    const chunkInterval = 300 // Chunk duration in milliseconds
+                    setInterval(() => {
+                        if (mediaRecorder.state === 'recording') {
+                            mediaRecorder.stop()
+                            mediaRecorder.start()
+                        } else {
+                            mediaRecorder.start()
+                        }
+                    }, chunkInterval)
+                })
+                .catch(error => {
+                    console.error('Error accessing microphone:', error)
+                })
+        }
     </script>
 </body>