Created
February 18, 2024 18:37
-
-
Save mbrock/d39df8868b7ac9381f36488d3b029548 to your computer and use it in GitHub Desktop.
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
| document.addEventListener('DOMContentLoaded', function() { | |
| let mediaRecorder; | |
| let audioChunks = []; | |
| let isRecording = false; | |
| const recordBtn = document.getElementById('recordBtn'); | |
| const transcriptionEl = document.getElementById('transcription'); | |
| let token = localStorage.getItem('apiToken'); | |
| if (!token) { | |
| token = prompt('Please enter your OpenAI API token:'); | |
| localStorage.setItem('apiToken', token); | |
| } | |
| if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { | |
| alert("MediaRecorder not supported on your browser, use Firefox or Chrome instead."); | |
| return; | |
| } | |
| navigator.mediaDevices.getUserMedia({ audio: true }) | |
| .then(stream => { | |
| mediaRecorder = new MediaRecorder(stream); | |
| mediaRecorder.ondataavailable = event => { | |
| audioChunks.push(event.data); | |
| }; | |
| mediaRecorder.onstop = () => { | |
| const audioBlob = new Blob(audioChunks, { type: 'audio/ogg; codecs=opus' }); | |
| audioChunks = []; // Reset chunks for next recording | |
| sendAudioToWhisper(audioBlob); | |
| }; | |
| }); | |
| recordBtn.addEventListener('click', () => { | |
| if (!isRecording) { | |
| audioChunks = []; // Ensure audioChunks is clear at start | |
| mediaRecorder.start(); | |
| recordBtn.textContent = 'Stop Recording'; | |
| isRecording = true; | |
| } else { | |
| mediaRecorder.stop(); | |
| recordBtn.textContent = 'Start Recording'; | |
| isRecording = false; | |
| } | |
| }); | |
| function sendAudioToWhisper(audioBlob) { | |
| const formData = new FormData(); | |
| formData.append('audio', audioBlob); | |
| fetch('https://api.openai.com/v1/whisper', { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${token}` | |
| }, | |
| body: formData | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| console.log('Success:', data); | |
| transcriptionEl.textContent = `Transcription: ${data.text}`; | |
| }) | |
| .catch((error) => { | |
| console.error('Error:', error); | |
| transcriptionEl.textContent = 'An error occurred while transcribing the audio.'; | |
| }); | |
| } | |
| }); |
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 Recorder and Transcriber</title> | |
| </head> | |
| <body> | |
| <button id="recordBtn">Start Recording</button> | |
| <p id="transcription">Transcription will appear here...</p> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment