Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Godot Export with Audio Recording</title> | |
| </head> | |
| <body> | |
| <h1>Godot Export with Microphone Recording</h1> | |
| <!-- Iframe for the Godot export --> | |
| <iframe src="godot/index.html" width="800" height="600" frameborder="0"></iframe> | |
| <script> | |
| // URL of the server to send audio chunks | |
| const serverUrl = "./api/process" | |
| // 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 | |
| }) | |
| // 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') | |
| } | |
| navigator.mediaDevices.getUserMedia({ audio: true }) | |
| .then(stream => { | |
| const audioContext = new (window.AudioContext || window.webkitAudioContext)() | |
| const mediaRecorder = new MediaRecorder(stream) | |
| const audioChunks = [] | |
| mediaRecorder.ondataavailable = event => { | |
| audioChunks.push(event.data) | |
| } | |
| mediaRecorder.onstop = () => { | |
| const audioBlob = new Blob(audioChunks, { type: 'audio/webm' }) | |
| audioChunks.length = 0 // Clear chunks after creating the Blob | |
| // 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] | |
| // 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) | |
| }) | |
| } | |
| } | |
| // 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> | |
| </html> |