1<html data-bs-theme="dark">
2
3<head>
4    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
5        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
6    <script src="https://unpkg.com/pcm-player"></script>
7</head>
8
9<body>
10    <nav class="navbar navbar-dark bg-primary">
11        <div class="container">
12            <span class="navbar-brand mb-0 h1">Bumble ASHA Sink</span>
13        </div>
14    </nav>
15    <br>
16
17    <div class="container">
18
19        <div class="row">
20            <div class="col-auto">
21                <button id="connect-audio" class="btn btn-danger" onclick="connectAudio()">Connect Audio</button>
22            </div>
23        </div>
24
25        <hr>
26
27        <div class="row">
28            <div class="col-4">
29                <label class="form-label">Browser Gain</label>
30                <input type="range" class="form-range" id="browser-gain" min="0" max="2" value="1" step="0.1"
31                    onchange="setGain()">
32            </div>
33        </div>
34
35        <hr>
36
37        <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2">
38            <h3>Log</h3>
39            <code id="log" style="white-space: pre-line;"></code>
40        </div>
41    </div>
42
43
44    <script>
45        let atResponseInput = document.getElementById("at_response")
46        let gainInput = document.getElementById('browser-gain')
47        let log = document.getElementById("log")
48        let socket = new WebSocket('ws://localhost:8888');
49        let sampleRate = 0;
50        let player;
51
52        socket.binaryType = "arraybuffer";
53        socket.onopen = _ => {
54            log.textContent += 'SOCKET OPEN\n'
55        }
56        socket.onclose = _ => {
57            log.textContent += 'SOCKET CLOSED\n'
58        }
59        socket.onerror = (error) => {
60            log.textContent += 'SOCKET ERROR\n'
61            console.log(`ERROR: ${error}`)
62        }
63        socket.onmessage = function (message) {
64            if (typeof message.data === 'string' || message.data instanceof String) {
65                log.textContent += `<-- ${event.data}\n`
66            } else {
67                // BINARY audio data.
68                if (player == null) return;
69                player.feed(message.data);
70            }
71        };
72
73        function connectAudio() {
74            player = new PCMPlayer({
75                inputCodec: 'Int16',
76                channels: 1,
77                sampleRate: 16000,
78                flushTime: 20,
79            });
80            player.volume(gainInput.value);
81            const button = document.getElementById("connect-audio")
82            button.disabled = true;
83            button.textContent = "Audio Connected";
84        }
85
86        function setGain() {
87            if (player != null) {
88                player.volume(gainInput.value);
89            }
90        }
91    </script>
92    </div>
93</body>
94
95</html>