iCare/audio.html at main · sp3c7r4/iCare · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO Audio Streaming</title>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <h1>Audio Streaming with Socket.IO</h1>
    <button id="start">Start Streaming</button>
    <button id="stop" disabled>Stop Streaming</button>
    <div id="output"></div>

    <script>
        let socket, mediaRecorder;

        document.getElementById('start').addEventListener('click', async () => {
            // Initialize Socket.IO connection
            socket = io("http://localhost:3000"); // Replace with your server URL

            // Listen for transcription results from the server
            socket.on("transcription", (data) => {
                document.getElementById('output').innerHTML += `<p>AI: ${data}</p>`;
            });

            // Request microphone access
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

            // Initialize MediaRecorder with audio/webm format
            mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });

            // Handle audio data chunks
            mediaRecorder.ondataavailable = async (event) => {
                if (event.data.size > 0) {
                    socket.emit("audio", { audio: event.data });
                }
            };

            // Start recording and send chunks every second
            mediaRecorder.start(1000);

            // Update button states
            document.getElementById('start').disabled = true;
            document.getElementById('stop').disabled = false;
        });

        document.getElementById('stop').addEventListener('click', () => {
            if (socket) {
                // Notify the server to stop streaming
                socket.emit("close", { message: "Stopped streaming", user_id: "3218920202" });

                // Disconnect the socket after a short delay
                setTimeout(() => {
                    socket.disconnect();
                }, 100); // 100ms delay
            }

            if (mediaRecorder) {
                mediaRecorder.stop();
            }

            // Update button states
            document.getElementById('start').disabled = false;
            document.getElementById('stop').disabled = true;
        });
    </script>
</body>
</html>