A Pen by Stan Williams on CodePen.
Created
May 20, 2025 23:20
-
-
Save stanwmusic/ca2b17fba15a8c5c4b6dde4dcdcb62f8 to your computer and use it in GitHub Desktop.
live speech
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Audio Transcription App</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Real-time Audio Transcription</h1> | |
| <button id="startRecording">Start Recording</button> | |
| <button id="stopRecording" disabled>Stop Recording</button> | |
| <p id="transcript">Transcript will appear here...</p> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let mediaRecorder; | |
| let audioChunks = []; | |
| const startButton = document.getElementById("startRecording"); | |
| const stopButton = document.getElementById("stopRecording"); | |
| const transcriptDisplay = document.getElementById("transcript"); | |
| const API_KEY = "your-maestra-api-key"; // Replace with your Maestra API key | |
| const API_URL = "https://api.maestra.ai/v1/transcribe"; // Maestra transcription API URL | |
| startButton.addEventListener("click", startRecording); | |
| stopButton.addEventListener("click", stopRecording); | |
| async function startRecording() { | |
| // Request permission to access the microphone | |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| mediaRecorder = new MediaRecorder(stream); | |
| mediaRecorder.ondataavailable = event => { | |
| audioChunks.push(event.data); | |
| }; | |
| mediaRecorder.onstop = () => { | |
| const audioBlob = new Blob(audioChunks, { type: "audio/wav" }); | |
| sendAudioToMaestra(audioBlob); | |
| }; | |
| mediaRecorder.start(); | |
| startButton.disabled = true; | |
| stopButton.disabled = false; | |
| } | |
| function stopRecording() { | |
| mediaRecorder.stop(); | |
| startButton.disabled = false; | |
| stopButton.disabled = true; | |
| } | |
| async function sendAudioToMaestra(audioBlob) { | |
| const formData = new FormData(); | |
| formData.append("audio_data", audioBlob, "audio.wav"); | |
| try { | |
| const response = await fetch(API_URL, { | |
| method: "POST", | |
| headers: { | |
| "Authorization": `Bearer ${API_KEY}` | |
| }, | |
| body: formData | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| updateTranscript(data); | |
| } else { | |
| console.error("Error with Maestra API:", response.statusText); | |
| } | |
| } catch (error) { | |
| console.error("Error sending audio:", error); | |
| } | |
| } | |
| function updateTranscript(data) { | |
| if (data.transcription) { | |
| transcriptDisplay.textContent = `Transcript: ${data.transcription}`; | |
| } else { | |
| transcriptDisplay.textContent = "Sorry, no transcription available."; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f4f4f9; | |
| text-align: center; | |
| padding: 50px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| margin: 20px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| } | |
| button:disabled { | |
| background-color: #ccc; | |
| } | |
| #transcript { | |
| font-size: 18px; | |
| color: #333; | |
| margin-top: 20px; | |
| white-space: pre-wrap; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment