mirror of
https://github.com/google/bumble.git
synced 2026-04-16 00:25:31 +00:00
95 lines
2.9 KiB
HTML
95 lines
2.9 KiB
HTML
<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> |