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 Unicast Server</span>
13        </div>
14    </nav>
15    <br>
16
17    <div class="container">
18        <button type="button" class="btn btn-danger" id="connect-audio" onclick="connectAudio()">Connect Audio</button>
19        <button class="btn btn-primary" type="button" disabled>
20            <span class="spinner-border spinner-border-sm" id="ws-status-spinner" aria-hidden="true"></span>
21            <span role="status" id="ws-status">WebSocket Connecting...</span>
22        </button>
23    </div>
24
25
26    <script>
27        let player = null;
28        const wsStatus = document.getElementById("ws-status");
29        const wsStatusSpinner = document.getElementById("ws-status-spinner");
30
31        const socket = new WebSocket('ws://127.0.0.1:7654/channel');
32        socket.binaryType = "arraybuffer";
33        socket.onmessage = function (message) {
34            if (typeof message.data === 'string' || message.data instanceof String) {
35                console.log(`channel MESSAGE: ${message.data}`);
36            } else {
37                console.log(typeof (message.data))
38                // BINARY audio data.
39                if (player == null) return;
40                player.feed(message.data);
41            }
42        };
43
44        socket.onopen = (message) => {
45            wsStatusSpinner.remove();
46            wsStatus.textContent = "WebSocket Connected";
47        }
48
49        socket.onclose = (message) => {
50            wsStatus.textContent = "WebSocket Disconnected";
51        }
52
53        function connectAudio() {
54            player = new PCMPlayer({
55                inputCodec: 'Int16',
56                channels: 2,
57                sampleRate: 48000,
58                flushTime: 10,
59            });
60            const button = document.getElementById("connect-audio")
61            button.disabled = true;
62            button.textContent = "Audio Connected";
63        }
64    </script>
65    </div>
66</body>
67
68</html>