<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>WebSocket</title> <link rel="stylesheet" type="text/css" href="style2.css" /> </head> <body> <header class="header"> <div class="config"> <button disabled>sanic</button> <button>Config</button> </div> <div class="playback-controls"> <div> <button>⏮️</button> <button>⏯️</button> <button>⏹️</button> <button>⏭️</button> </div> <label for="progress"></label> <input type="range" id="progress" name="progress" min="0" max="100" /> </div> <div class="playlist-controls"> <div> <label for="repeat">repeat</label> <input type="checkbox" id="repeat" name="repeat" /> <label for="shuffle">shuffle</label> <input type="checkbox" id="shuffle" name="shuffle" /> </div> <div> <label for="fade">fade</label> <button>-</button> <input type="number" id="fade" name="fade" min="0" /> <button>+</button> </div> <label for="volume"></label> <input id="volume" name="volume" type="range" min="1" max="100" /> </div> <div class="track-info"> <p>Now playing: 00:00:00/100:00:00</p> <label for="track">track</label> <input type="text" id="track" name="track" disabled /> </div> </header> <div class="playlist"> <table> <thead> <tr> <th>Position</th> <th>Title</th> <th>Artist</th> <th>Genre</th> <th>Album</th> <th>Time</th> <th>Disc</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr> <td>2</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr> <td>3</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr> <td>4</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr> <td>5</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr> <td>6</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> <tr> <td>7</td> <td>Chakra</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>undefined</td> <td>undefined</td> <td>undefined</td> <td>9:29</td> </tr> </tbody> </table> </div> <section class="db"> <div class="tabs"></div> <div class="result"></div> </section> <footer class="footer"> <p id="console"></p> </footer> <script> const loc = window.location; const proto = loc.protocol === "https:" ? "wss:" : "ws:" const ws = new WebSocket(proto + "//" + loc.host + "/ws") ws.onopen = function() { console.log("Connected") } ws.onmessage = function(evt) { const out = document.getElementById("console"); out.innerHTML += evt.data + "<br>"; // TODO: react on MPD communication here // TODO: react on yt-dlp communication here } </script> </body> </html>