| <html data-bs-theme="dark"> |
| |
| <head> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" |
| integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> |
| <script src="https://unpkg.com/pcm-player"></script> |
| </head> |
| |
| <body> |
| <nav class="navbar navbar-dark bg-primary"> |
| <div class="container"> |
| <span class="navbar-brand mb-0 h1">Bumble ASHA Sink</span> |
| </div> |
| </nav> |
| <br> |
| |
| <div class="container"> |
| |
| <div class="row"> |
| <div class="col-auto"> |
| <button id="connect-audio" class="btn btn-danger" onclick="connectAudio()">Connect Audio</button> |
| </div> |
| </div> |
| |
| <hr> |
| |
| <div class="row"> |
| <div class="col-4"> |
| <label class="form-label">Browser Gain</label> |
| <input type="range" class="form-range" id="browser-gain" min="0" max="2" value="1" step="0.1" |
| onchange="setGain()"> |
| </div> |
| </div> |
| |
| <hr> |
| |
| <div id="socketStateContainer" class="bg-body-tertiary p-3 rounded-2"> |
| <h3>Log</h3> |
| <code id="log" style="white-space: pre-line;"></code> |
| </div> |
| </div> |
| |
| |
| <script> |
| let atResponseInput = document.getElementById("at_response") |
| let gainInput = document.getElementById('browser-gain') |
| let log = document.getElementById("log") |
| let socket = new WebSocket('ws://localhost:8888'); |
| let sampleRate = 0; |
| let player; |
| |
| socket.binaryType = "arraybuffer"; |
| socket.onopen = _ => { |
| log.textContent += 'SOCKET OPEN\n' |
| } |
| socket.onclose = _ => { |
| log.textContent += 'SOCKET CLOSED\n' |
| } |
| socket.onerror = (error) => { |
| log.textContent += 'SOCKET ERROR\n' |
| console.log(`ERROR: ${error}`) |
| } |
| socket.onmessage = function (message) { |
| if (typeof message.data === 'string' || message.data instanceof String) { |
| log.textContent += `<-- ${event.data}\n` |
| } else { |
| // BINARY audio data. |
| if (player == null) return; |
| player.feed(message.data); |
| } |
| }; |
| |
| function connectAudio() { |
| player = new PCMPlayer({ |
| inputCodec: 'Int16', |
| channels: 1, |
| sampleRate: 16000, |
| flushTime: 20, |
| }); |
| player.volume(gainInput.value); |
| const button = document.getElementById("connect-audio") |
| button.disabled = true; |
| button.textContent = "Audio Connected"; |
| } |
| |
| function setGain() { |
| if (player != null) { |
| player.volume(gainInput.value); |
| } |
| } |
| </script> |
| </div> |
| </body> |
| |
| </html> |
