Di era digital saat ini, teknologi Internet of Things (IoT) sudah semakin mudah diakses. Bahkan dengan budget terbatas, kita bisa membuat proyek menarik yang menggabungkan perangkat mikrokontroler dengan teknologi web modern. Pada artikel kali ini, saya akan berbagi pengalaman membuat asisten virtual sederhana menggunakan ESP8266 dan teknologi speech recognition (pengenalan suara) yang berjalan di browser.
Apa yang Bisa Dilakukan Alat Ini?
Proyek ini memungkinkan kita untuk:
- Mengenali suara melalui browser smartphone/laptop
- Menampilkan teks hasil pengenalan suara ke layar LCD 16×2
- Bisa dikembangkan untuk terhubung dengan API AI seperti Groq
Yang menarik, kita tidak perlu modul pengenalan suara khusus karena memanfaatkan kemampuan browser modern yang sudah mendukung Web Speech API.
Komponen yang Dibutuhkan
- NodeMCU ESP8266
- LCD I2C 16×2
- Kabel jumper secukupnya
- Koneksi WiFi
- Smartphone/laptop dengan browser yang mendukung Web Speech API (Chrome, Edge, Safari)
Rangkaian Hardware
Rangkaian hardware-nya sangat sederhana:
- VCC LCD ke 3.3V ESP8266
- GND LCD ke GND ESP8266
- SDA LCD ke pin D2 (GPIO4) ESP8266
- SCL LCD ke pin D1 (GPIO5) ESP8266
Cara Kerja
Sistem ini bekerja dengan prinsip sebagai berikut:
- ESP8266 bertindak sebagai web server yang menampilkan halaman HTML dengan fitur speech recognition
- Browser mengakses halaman tersebut dan mengaktifkan fitur pengenalan suara
- Hasil pengenalan suara dikirim kembali ke ESP8266 melalui HTTP request
- ESP8266 menampilkan teks yang diterima ke layar LCD
Yang membuat sistem ini menarik adalah kita memanfaatkan kemampuan browser untuk mengenali suara tanpa perlu menambahkan hardware khusus. Pengenalan suara terjadi di browser, bukan di ESP8266, sehingga kita bisa mengatasi keterbatasan memori dan daya komputasi mikrokontroler.
Kode Program
Berikut adalah kode lengkap untuk proyek ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
<span class="line"><span style="color: #5E81AC; font-weight: bold">#</span><span style="color: #81A1C1">include</span><span style="color: #5E81AC"> </span><span style="color: #ECEFF4"><</span><span style="color: #A3BE8C">ESP8266WiFi.h</span><span style="color: #ECEFF4">></span></span> <span class="line"><span style="color: #5E81AC; font-weight: bold">#</span><span style="color: #81A1C1">include</span><span style="color: #5E81AC"> </span><span style="color: #ECEFF4"><</span><span style="color: #A3BE8C">ESP8266WebServer.h</span><span style="color: #ECEFF4">></span></span> <span class="line"><span style="color: #5E81AC; font-weight: bold">#</span><span style="color: #81A1C1">include</span><span style="color: #5E81AC"> </span><span style="color: #ECEFF4"><</span><span style="color: #A3BE8C">LiquidCrystal_I2C.h</span><span style="color: #ECEFF4">></span></span> <span class="line"><span style="color: #5E81AC; font-weight: bold">#</span><span style="color: #81A1C1">include</span><span style="color: #5E81AC"> </span><span style="color: #ECEFF4"><</span><span style="color: #A3BE8C">Wire.h</span><span style="color: #ECEFF4">></span></span> <span class="line"></span> <span class="line"><span style="color: #616E88">// WiFi credentials</span></span> <span class="line"><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">char*</span><span style="color: #D8DEE9FF"> ssid </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">NAMA_WIFI_ANDA</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">char*</span><span style="color: #D8DEE9FF"> password </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">PASSWORD_WIFI_ANDA</span><span style="color: #ECEFF4">"</span><span style="color: #81A1C1">;</span></span> <span class="line"></span> <span class="line"><span style="color: #D8DEE9FF">ESP8266WebServer </span><span style="color: #88C0D0">server</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">80</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF">LiquidCrystal_I2C </span><span style="color: #88C0D0">lcd</span><span style="color: #ECEFF4">(</span><span style="color: #81A1C1">0x</span><span style="color: #B48EAD">27</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">16</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">2</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span><span style="color: #616E88"> // Alamat I2C LCD</span></span> <span class="line"></span> <span class="line"><span style="color: #616E88">// Deklarasi prototipe fungsi</span></span> <span class="line"><span style="color: #81A1C1">void</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">handleSpeechText</span><span style="color: #ECEFF4">()</span><span style="color: #81A1C1">;</span></span> <span class="line"></span> <span class="line"><span style="color: #616E88">// Halaman web dengan speech recognition</span></span> <span class="line"><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">char*</span><span style="color: #D8DEE9FF"> htmlPage </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">R"rawliteral(</span></span> <span class="line"><span style="color: #A3BE8C"><!DOCTYPE html></span></span> <span class="line"><span style="color: #A3BE8C"><html></span></span> <span class="line"><span style="color: #A3BE8C"><head></span></span> <span class="line"><span style="color: #A3BE8C"> <meta name="viewport" content="width=device-width, initial-scale=1"></span></span> <span class="line"><span style="color: #A3BE8C"> <title>ESP8266 Speech Recognition</title></span></span> <span class="line"><span style="color: #A3BE8C"> <style></span></span> <span class="line"><span style="color: #A3BE8C"> body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }</span></span> <span class="line"><span style="color: #A3BE8C"> button { padding: 12px 20px; font-size: 16px; margin: 10px; }</span></span> <span class="line"><span style="color: #A3BE8C"> #result { margin: 20px; font-size: 18px; min-height: 50px; }</span></span> <span class="line"><span style="color: #A3BE8C"> .listening { color: red; }</span></span> <span class="line"><span style="color: #A3BE8C"> </style></span></span> <span class="line"><span style="color: #A3BE8C"></head></span></span> <span class="line"><span style="color: #A3BE8C"><body></span></span> <span class="line"><span style="color: #A3BE8C"> <h1>ESP8266 Speech Recognition</h1></span></span> <span class="line"><span style="color: #A3BE8C"> <button id="startBtn">Mulai Mendengarkan</button></span></span> <span class="line"><span style="color: #A3BE8C"> <button id="stopBtn" disabled>Berhenti</button></span></span> <span class="line"><span style="color: #A3BE8C"> <div id="result">Ucapan Anda akan muncul di sini...</div></span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> <script></span></span> <span class="line"><span style="color: #A3BE8C"> var recognition;</span></span> <span class="line"><span style="color: #A3BE8C"> var resultText = "";</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> // Cek apakah browser mendukung speech recognition</span></span> <span class="line"><span style="color: #A3BE8C"> if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {</span></span> <span class="line"><span style="color: #A3BE8C"> recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();</span></span> <span class="line"><span style="color: #A3BE8C"> recognition.continuous = true;</span></span> <span class="line"><span style="color: #A3BE8C"> recognition.interimResults = true;</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> recognition.onstart = function() {</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('startBtn').disabled = true;</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('stopBtn').disabled = false;</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('result').classList.add('listening');</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('result').textContent = "Mendengarkan...";</span></span> <span class="line"><span style="color: #A3BE8C"> };</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> recognition.onresult = function(event) {</span></span> <span class="line"><span style="color: #A3BE8C"> resultText = "";</span></span> <span class="line"><span style="color: #A3BE8C"> for (var i = event.resultIndex; i < event.results.length; i++) {</span></span> <span class="line"><span style="color: #A3BE8C"> if (event.results[i].isFinal) {</span></span> <span class="line"><span style="color: #A3BE8C"> resultText += event.results[i][0].transcript;</span></span> <span class="line"><span style="color: #A3BE8C"> }</span></span> <span class="line"><span style="color: #A3BE8C"> }</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('result').textContent = resultText;</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> // Kirim ke ESP8266</span></span> <span class="line"><span style="color: #A3BE8C"> if (resultText.trim() !== "") {</span></span> <span class="line"><span style="color: #A3BE8C"> sendToESP(resultText);</span></span> <span class="line"><span style="color: #A3BE8C"> }</span></span> <span class="line"><span style="color: #A3BE8C"> };</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> recognition.onerror = function(event) {</span></span> <span class="line"><span style="color: #A3BE8C"> console.error('Speech recognition error:', event.error);</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('result').textContent = "Error: " + event.error;</span></span> <span class="line"><span style="color: #A3BE8C"> resetButtons();</span></span> <span class="line"><span style="color: #A3BE8C"> };</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> recognition.onend = function() {</span></span> <span class="line"><span style="color: #A3BE8C"> resetButtons();</span></span> <span class="line"><span style="color: #A3BE8C"> };</span></span> <span class="line"><span style="color: #A3BE8C"> } else {</span></span> <span class="line"><span style="color: #A3BE8C"> alert("Browser Anda tidak mendukung speech recognition. Coba gunakan Chrome atau Edge.");</span></span> <span class="line"><span style="color: #A3BE8C"> }</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> function resetButtons() {</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('startBtn').disabled = false;</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('stopBtn').disabled = true;</span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('result').classList.remove('listening');</span></span> <span class="line"><span style="color: #A3BE8C"> }</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> function sendToESP(text) {</span></span> <span class="line"><span style="color: #A3BE8C"> fetch('/process?text=' + encodeURIComponent(text))</span></span> <span class="line"><span style="color: #A3BE8C"> .then(response => response.text())</span></span> <span class="line"><span style="color: #A3BE8C"> .then(data => console.log('ESP response:', data))</span></span> <span class="line"><span style="color: #A3BE8C"> .catch(error => console.error('Error sending to ESP:', error));</span></span> <span class="line"><span style="color: #A3BE8C"> }</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('startBtn').addEventListener('click', function() {</span></span> <span class="line"><span style="color: #A3BE8C"> recognition.start();</span></span> <span class="line"><span style="color: #A3BE8C"> });</span></span> <span class="line"><span style="color: #A3BE8C"> </span></span> <span class="line"><span style="color: #A3BE8C"> document.getElementById('stopBtn').addEventListener('click', function() {</span></span> <span class="line"><span style="color: #A3BE8C"> recognition.stop();</span></span> <span class="line"><span style="color: #A3BE8C"> });</span></span> <span class="line"><span style="color: #A3BE8C"> </script></span></span> <span class="line"><span style="color: #A3BE8C"></body></span></span> <span class="line"><span style="color: #A3BE8C"></html></span></span> <span class="line"><span style="color: #ECEFF4">)rawliteral"</span><span style="color: #81A1C1">;</span></span> <span class="line"></span> <span class="line"><span style="color: #81A1C1">void</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">setup</span><span style="color: #ECEFF4">()</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">begin</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">115200</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Wire</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">begin</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">4</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">5</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span><span style="color: #616E88"> // SDA = D2 (GPIO4), SCL = D1 (GPIO5)</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">begin</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">16</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">2</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">backlight</span><span style="color: #ECEFF4">()</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">setCursor</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">print</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">Connecting WiFi</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">WiFi</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">begin</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9FF">ssid</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> password</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">while</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">WiFi</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">status</span><span style="color: #ECEFF4">()</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">!=</span><span style="color: #D8DEE9FF"> WL_CONNECTED</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">delay</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">500</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">print</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">.</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">println</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #EBCB8B">\n</span><span style="color: #A3BE8C">WiFi Connected</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">print</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">IP Address: </span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">println</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">WiFi</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">localIP</span><span style="color: #ECEFF4">())</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">clear</span><span style="color: #ECEFF4">()</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">setCursor</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">print</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">WiFi Connected</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">setCursor</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">1</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">print</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">WiFi</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">localIP</span><span style="color: #ECEFF4">())</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #616E88"> // Route untuk halaman utama</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">on</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">/</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> HTTP_GET</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">[]()</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">send</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">200</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">text/html</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> htmlPage</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">})</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #616E88"> // Route untuk memproses teks dari speech recognition</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">on</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">/process</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> HTTP_GET</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> handleSpeechText</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">begin</span><span style="color: #ECEFF4">()</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">println</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">Web Server started</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">println</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">Open browser and navigate to this IP address</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #ECEFF4">}</span></span> <span class="line"></span> <span class="line"><span style="color: #81A1C1">void</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">loop</span><span style="color: #ECEFF4">()</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">handleClient</span><span style="color: #ECEFF4">()</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #ECEFF4">}</span></span> <span class="line"></span> <span class="line"><span style="color: #81A1C1">void</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">handleSpeechText</span><span style="color: #ECEFF4">()</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">if</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">hasArg</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">text</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">))</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> String text </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">arg</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">text</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">text</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">trim</span><span style="color: #ECEFF4">()</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #616E88"> // Print debug</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">Serial</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">println</span><span style="color: #ECEFF4">(</span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">[Speech Text] </span><span style="color: #ECEFF4">"</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">+</span><span style="color: #D8DEE9FF"> text</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #616E88"> // Tampilkan di LCD (potong jika terlalu panjang)</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">clear</span><span style="color: #ECEFF4">()</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #616E88"> // Baris pertama (maksimal 16 karakter)</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">setCursor</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">print</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">text</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">substring</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">min</span><span style="color: #ECEFF4">((</span><span style="color: #81A1C1">unsigned</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">int</span><span style="color: #ECEFF4">)</span><span style="color: #B48EAD">16</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">text</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">length</span><span style="color: #ECEFF4">())))</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #616E88"> // Baris kedua (karakter 17-32 jika ada)</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">if</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">text</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">length</span><span style="color: #ECEFF4">()</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">></span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">16</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">setCursor</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">0</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">1</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">lcd</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">print</span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">text</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">substring</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">16</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">min</span><span style="color: #ECEFF4">((</span><span style="color: #81A1C1">unsigned</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">int</span><span style="color: #ECEFF4">)</span><span style="color: #B48EAD">32</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">text</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">length</span><span style="color: #ECEFF4">())))</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">send</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">200</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">text/plain</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">Text diterima</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">else</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">server</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">send</span><span style="color: #ECEFF4">(</span><span style="color: #B48EAD">400</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">text/plain</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">,</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">"</span><span style="color: #A3BE8C">Tidak ada teks</span><span style="color: #ECEFF4">"</span><span style="color: #ECEFF4">)</span><span style="color: #81A1C1">;</span></span> <span class="line"><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span></span> <span class="line"><span style="color: #ECEFF4">}</span></span> <span class="line"></span> |
Jangan lupa ganti
NAMA_WIFI_ANDAdanPASSWORD_WIFI_ANDAdengan kredensial WiFi Anda.
Penggunaan
- Upload kode program ke ESP8266 melalui Arduino IDE
- Buka Serial Monitor untuk melihat IP address ESP8266
- Dari smartphone atau laptop, buka browser dan akses IP address tersebut
- Tekan tombol “Mulai Mendengarkan” dan ucapkan sesuatu
- Teks hasil pengenalan suara akan muncul di layar browser dan LCD
Pengembangan Lebih Lanjut
Sistem ini masih sangat dasar, tapi bisa dikembangkan lebih jauh. Beberapa ide pengembangan:
- Integrasi dengan API AI: Mengirim teks hasil pengenalan suara ke Groq, OpenAI, atau layanan AI lainnya untuk mendapatkan respons cerdas
- Kontrol Perangkat: Menambahkan kemampuan untuk mengontrol relay atau perangkat lain berdasarkan perintah suara
- Penyimpanan Data: Menyimpan riwayat percakapan ke database atau file
- Dukungan Bahasa: Menambahkan dukungan untuk bahasa lain selain bahasa default
Kesimpulan
Dengan kombinasi ESP8266 dan teknologi web modern, kita bisa membuat sistem pengenalan suara sederhana tanpa perlu komponen mahal. Meskipun ESP8266 memiliki keterbatasan RAM, pendekatan ini mengatasinya dengan memanfaatkan kemampuan browser untuk pemrosesan yang berat.
Semoga artikel ini bermanfaat dan bisa menjadi inspirasi untuk proyek-proyek IoT lainnya. Jangan ragu untuk bereksperimen dan mengembangkan ide ini lebih jauh sesuai kebutuhan Anda.
Selamat mencoba dan berkreasi!
