Spaces:
Sleeping
Sleeping
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Mood-Based Music Recommendation</title> | |
| <style> | |
| /* Your existing CSS styles here */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f2f2f2; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .prompt { | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin: 10px; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="prompt"> | |
| <!-- Audio prompt --> | |
| <audio controls autoplay id="audioPrompt"> | |
| <source src="how_are_you_feeling_today.mp3" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <button id="startBtn" onclick="startRecording()">Start Recording</button> | |
| <button id="stopBtn" onclick="stopRecording()" disabled>Stop Recording</button> | |
| </div> | |
| </div> | |
| <script> | |
| let mediaRecorder; | |
| let recordedChunks = []; | |
| function startRecording() { | |
| navigator.mediaDevices.getUserMedia({ audio: true }) | |
| .then(function (stream) { | |
| mediaRecorder = new MediaRecorder(stream); | |
| mediaRecorder.ondataavailable = function (event) { | |
| recordedChunks.push(event.data); | |
| }; | |
| mediaRecorder.onstop = function () { | |
| const audioBlob = new Blob(recordedChunks, { type: 'audio/mp3' }); | |
| // Create a download link to save the audio recording | |
| const downloadLink = document.createElement('a'); | |
| downloadLink.href = URL.createObjectURL(audioBlob); | |
| downloadLink.download = 'recorded_audio.mp3'; | |
| downloadLink.click(); | |
| // Reset the recordedChunks for the next recording | |
| recordedChunks = []; | |
| }; | |
| mediaRecorder.start(); | |
| document.getElementById("startBtn").disabled = true; | |
| document.getElementById("stopBtn").disabled = false; | |
| // Pause the audio prompt while recording | |
| const audioPrompt = document.getElementById("audioPrompt"); | |
| audioPrompt.pause(); | |
| }) | |
| .catch(function (err) { | |
| console.log("Error accessing microphone:", err); | |
| }); | |
| } | |
| function stopRecording() { | |
| mediaRecorder.stop(); | |
| document.getElementById("startBtn").disabled = false; | |
| document.getElementById("stopBtn").disabled = true; | |
| // Resume the audio prompt after recording | |
| const audioPrompt = document.getElementById("audioPrompt"); | |
| audioPrompt.play(); | |
| } | |
| </script> | |
| </body> | |
| </html> | |