mbrock/app.js

## app.js
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.';
        });
    }
});

## index.html
<!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>
	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.';
	});
	}
	});
	<!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>