Broadcasting Your Voice with ESP32-S3 & INMP441

2026-01-12 17:27:43 +03:00 · 2023-05-16 15:15:24 -07:00
parent ea26810ea0
commit de2b756bd6
7 changed files with 1227 additions and 0 deletions
--- a/ESP32_MICROPHONE/Broadcasting_Your_Voice/wsAudioServer/audio_client.html
+++ b/ESP32_MICROPHONE/Broadcasting_Your_Voice/wsAudioServer/audio_client.html
@@ -0,0 +1,128 @@
+<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>