mirror of
https://github.com/0015/ThatProject.git
synced 2026-01-13 01:37:43 +03:00
128 lines
3.9 KiB
HTML
128 lines
3.9 KiB
HTML
<html>
|
|
<head>
|
|
<title>PCM Player</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
|
<link rel="icon" href="image/favicon.ico" type="image/x-icon">
|
|
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
|
|
<script src="https://unpkg.com/pcm-player"></script>
|
|
<script type="js/worker.js"></script>
|
|
</head>
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
.button {
|
|
border: none;
|
|
padding: 15px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<body>
|
|
<h1>ESP32-S3 + I²S Digital Microphone</h1>
|
|
<p>Connect to WebSocket by pressing the [Connect] button first!</p>
|
|
<button id="connectBtn" class="button" onclick="connect()">Connect</button>
|
|
<input type="range" max="1" value="0.5" min="0" id="range" onchange="changeVolume(event)" step="0.1"><br />
|
|
<button id="pauseBtn" class="button" onclick="pause()">Pause Playing</button>
|
|
<button id="continueBtn" class="button" onclick="continuePlay()">Continue Playing</button>
|
|
<div id="graph"></div>
|
|
<script>
|
|
|
|
function addDarkmodeWidget() {
|
|
new Darkmode().showWidget();
|
|
}
|
|
window.addEventListener('load', addDarkmodeWidget);
|
|
|
|
var connectBtn = document.getElementById("connectBtn");
|
|
var pauseBtn = document.getElementById("pauseBtn");
|
|
var continueBtn = document.getElementById("continueBtn");
|
|
connectBtn.disabled = false;
|
|
pauseBtn.disabled = true;
|
|
continueBtn.disabled = true;
|
|
|
|
var worker = new Worker('js/worker.js')
|
|
worker.addEventListener('message', function (e) {
|
|
|
|
graphDataArray = graphDataArray.concat(e.data)
|
|
graphDataArray.splice(0, 1)
|
|
|
|
var data_update = {
|
|
y: [graphDataArray]
|
|
};
|
|
|
|
Plotly.update('graph', data_update)
|
|
}, false);
|
|
|
|
const arrayLength = 100
|
|
var graphDataArray = []
|
|
|
|
for (var i = 0; i < arrayLength; i++) {
|
|
graphDataArray[i] = 0;
|
|
}
|
|
|
|
var layout = {
|
|
title: 'Streaming Data',
|
|
paper_bgcolor: "#000",
|
|
plot_bgcolor: "#000",
|
|
xaxis: {
|
|
domain: [0, 1],
|
|
showticklabels: false,
|
|
color: "#FFF",
|
|
},
|
|
yaxis: { domain: [0, 1],
|
|
color: "#FFF",
|
|
rangemode: "auto",
|
|
},
|
|
}
|
|
|
|
Plotly.newPlot('graph', [{
|
|
y: graphDataArray,
|
|
mode: 'lines',
|
|
line: { color: '#DF56F1' }
|
|
}], layout);
|
|
|
|
let player;
|
|
window.connect = function connect() {
|
|
|
|
connectBtn.disabled = !connectBtn.disabled;
|
|
pauseBtn.disabled = !pauseBtn.disabled;
|
|
|
|
player = new PCMPlayer({
|
|
inputCodec: 'Int16',
|
|
channels: 1,
|
|
//sampleRate: 16000,
|
|
sampleRate: 44100,
|
|
});
|
|
const WS_URL = 'ws:///<HOST_IP>:<Port>'
|
|
var ws = new WebSocket(WS_URL)
|
|
ws.binaryType = 'arraybuffer'
|
|
ws.addEventListener('message', function (event) {
|
|
if(continueBtn.disabled){
|
|
player.feed(event.data)
|
|
worker.postMessage(event.data) // Remove if it makes the web browser slow.
|
|
}
|
|
});
|
|
}
|
|
window.changeVolume = function changeVolume(e) {
|
|
player.volume(document.querySelector('#range').value)
|
|
}
|
|
window.pause = async function pause() {
|
|
pauseBtn.disabled = true;
|
|
continueBtn.disabled = false;
|
|
await player.pause()
|
|
}
|
|
window.continuePlay = function continuePlay() {
|
|
player.continue()
|
|
pauseBtn.disabled = false;
|
|
continueBtn.disabled = true;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |