-
Notifications
You must be signed in to change notification settings - Fork 3
/
record.html
44 lines (43 loc) · 2.08 KB
/
record.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Minimal example of recording audio and sending the recording to whisper-1 endpoint</title>
</head>
<body>
<button id="record">Record</button>
<div id="output"></div>
<script>
//STT using whisper endpoint, will add to openai.js and the test
const listen = async (btn, output) => {
const devices = navigator.mediaDevices;
if (!devices.getUserMedia) return;
let chunks = [];
let onSuccess = async stream => {
const recorder = new MediaRecorder(stream);
btn.onclick = () => btn.textContent === 'Stop' ? (recorder.stop(), btn.textContent = 'Start') : (recorder.start(), btn.textContent = 'Stop');
recorder.onstop = async e => {
const data = new FormData();
data.append('file', new Blob(chunks, { 'type': 'audio/webm' }), "test.webm")
data.append('model', 'whisper-1');
const opts = { method: 'POST', headers: { 'Authorization': `Bearer ${token}` }, body: data };
chunks = [];
try { output.textContent = (await (await fetch('https://api.openai.com/v1/audio/transcriptions', opts)).json()).text; }
catch(err) { console.log(err) }
}
recorder.ondataavailable = e => chunks.push(e.data)
}
let onError = err => console.log('The following error occured: ' + err)
devices.getUserMedia({ audio: true }).then(onSuccess, onError);
}
(async () => {
const $ = id => document.getElementById(id), btn = $('record'), output = $('output');
window.token = null;
if (!(token = localStorage.getItem('OPENAI_API_KEY')))
localStorage.setItem('OPENAI_API_KEY', token = prompt("Please input OpenAI API key (stored in browser cache)", ""))
await listen(btn, output);
})();
</script>
</body>
</html>