|
7 | 7 | <body>
|
8 | 8 | <button id="startRecord">开始录音</button>
|
9 | 9 | <button id="stopRecord" disabled>停止录音</button>
|
| 10 | +<button id="sendData" disabled>发送数据</button> |
| 11 | +<audio id="audioPlayer" controls></audio> |
| 12 | +<a id="downloadLink" style="display: none;">下载录音</a> |
10 | 13 | <pre id="response"></pre>
|
11 | 14 |
|
12 | 15 | <script>
|
13 | 16 | let mediaRecorder;
|
14 | 17 | let audioChunks = [];
|
| 18 | + let audioBlob; |
15 | 19 |
|
16 |
| - document.getElementById("startRecord").addEventListener("click", async () => { |
17 |
| - const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: false}); |
18 |
| - mediaRecorder = new MediaRecorder(stream); |
19 |
| - mediaRecorder.start(); |
| 20 | + document.getElementById("startRecord").addEventListener("click", () => { |
| 21 | + navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 16000 } }) |
| 22 | + .then(stream => { |
| 23 | + mediaRecorder = new MediaRecorder(stream); |
| 24 | + mediaRecorder.start(); |
20 | 25 |
|
21 |
| - mediaRecorder.ondataavailable = (event) => { |
22 |
| - audioChunks.push(event.data); |
23 |
| - }; |
| 26 | + mediaRecorder.ondataavailable = event => { |
| 27 | + audioChunks.push(event.data); |
| 28 | + }; |
24 | 29 |
|
25 |
| - mediaRecorder.onstop = () => { |
26 |
| - const audioBlob = new Blob(audioChunks, {type: 'audio/wav'}); |
27 |
| - sendData(audioBlob); |
28 |
| - audioChunks = []; |
29 |
| - }; |
| 30 | + mediaRecorder.onstop = () => { |
| 31 | + audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); |
| 32 | + audioChunks = []; |
30 | 33 |
|
31 |
| - setTimeout(() => { |
32 |
| - mediaRecorder.stop(); |
33 |
| - }, 30000); // Stop recording after 30 seconds |
| 34 | + const audioUrl = URL.createObjectURL(audioBlob); |
| 35 | + document.getElementById("audioPlayer").src = audioUrl; |
| 36 | + document.getElementById("downloadLink").href = audioUrl; |
| 37 | + document.getElementById("downloadLink").download = "recording.wav"; |
| 38 | + document.getElementById("downloadLink").style.display = 'block'; |
| 39 | + |
| 40 | + document.getElementById("sendData").disabled = false; |
| 41 | + }; |
| 42 | + }); |
34 | 43 |
|
35 | 44 | document.getElementById("startRecord").disabled = true;
|
36 | 45 | document.getElementById("stopRecord").disabled = false;
|
|
42 | 51 | document.getElementById("stopRecord").disabled = true;
|
43 | 52 | });
|
44 | 53 |
|
45 |
| - function sendData(audioBlob) { |
| 54 | + document.getElementById("sendData").addEventListener("click", () => { |
46 | 55 | const formData = new FormData();
|
47 | 56 | formData.append("file", audioBlob);
|
48 | 57 | formData.append("temperature", "0.2");
|
49 | 58 | formData.append("response-format", "json");
|
50 | 59 |
|
51 |
| - fetch("http://127.0.0.1:8080/inference", { |
| 60 | + fetch("/inference", { |
52 | 61 | method: "POST",
|
53 | 62 | body: formData,
|
54 | 63 | })
|
|
59 | 68 | .catch(error => {
|
60 | 69 | console.error("Error:", error);
|
61 | 70 | });
|
62 |
| - } |
| 71 | + }); |
63 | 72 | </script>
|
64 | 73 | </body>
|
65 | 74 | </html>
|
0 commit comments