add visualisation and refactor interface

ninedraft · Nov 4, 2023 · a252d7b · a252d7b
1 parent f001cbd
commit a252d7b
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 26 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -10,25 +10,79 @@
 </head>
 
 <body>
-    <h1 class="title">Current Track</h1>
+    <div class="container">
+        <h1 class="title">Current Track</h1>
 
-    <div id="track-cover" class="cover">
-        <!-- This div will be updated by htmx -->
-        <img src="/music.svg" alt="Loading..." class="cover-image">
-    </div>
+        <div id="track-cover" class="cover">
+            <!-- This div will be updated by htmx -->
+            <img src="/music.svg" alt="Loading..." class="cover-image">
+        </div>
+
+        <div id="track-data" hx-get="/music/track" hx-trigger="load, every 10s" class="track-info">
+            <!-- This div will be updated by htmx -->
+            <p class="track">Track: Loading...</p>
+            <p class="author">Author: Loading...</p>
+            <p class="length">Length: Loading...</p>
+        </div>
+
+        <h3 class="player-title">Music Player</h3>
+        <button id="playStopButton" class="control-button">Play</button>
+        <canvas id="canvas" class="visualizer" width="500" height="200"></canvas>
+        <audio id="audio" class="player" preload="metadata">
+            <source src="/music" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
 
-    <div id="track-data" hx-get="/music/track" hx-trigger="load, every 10s" class="track-info">
-        <!-- This div will be updated by htmx -->
-        <p class="track">Track: Loading...</p>
-        <p class="author">Author: Loading...</p>
-        <p class="length">Length: Loading...</p>
     </div>
 
-    <h3 class="player-title">Music Player</h3>
-    <audio controls class="player">
-        <source src="/music" type="audio/mpeg">
-        Your browser does not support the audio element.
-    </audio>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var audio = document.getElementById('audio');
+            if (audio instanceof HTMLMediaElement) {
+                var audio = document.getElementById('audio');
+                var ctx = new (window.AudioContext || window.webkitAudioContext)();
+                var analyser = ctx.createAnalyser();
+                var audioSrc = ctx.createMediaElementSource(audio);
+                var canvas = document.getElementById('canvas');
+                var cctx = canvas.getContext('2d');
+
+                audioSrc.connect(analyser);
+                audioSrc.connect(ctx.destination);
+            } else {
+                console.error('audio is not an instance of HTMLMediaElement');
+            }
+
+
+
+            const n = 3;
+
+
+            var freqData = new Uint8Array(analyser.frequencyBinCount);
+            function renderFrame() {
+                cctx.fillStyle = '#4CAF50';
+                analyser.getByteFrequencyData(freqData);
+                cctx.clearRect(0, 0, canvas.width, canvas.height);
+                for (var i = 0; i < freqData.length / n; i += n) {
+                    var magnitude = freqData[n * i];
+                    cctx.fillRect(i, canvas.height, n, -magnitude);
+                }
+                requestAnimationFrame(renderFrame);
+            }
+
+
+            document.getElementById('playStopButton').addEventListener('click', function () {
+                var audio = document.querySelector('.player');
+                if (audio.paused) {
+                    this.textContent = 'Pause';
+                    audio.play();
+                    renderFrame();
+                } else {
+                    this.textContent = 'Play';
+                    audio.pause();
+                }
+            });
+        });
+    </script>
 </body>
 
 </html>
diff --git a/assets/style.css b/assets/style.css
@@ -1,9 +1,11 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .track {
     text-align: center;
-    padding: 20px;
-    background-color: #f0f0f0;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
     margin: 20px auto;
     width: 80%;
     max-width: 500px;
@@ -29,7 +31,6 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #f0f0f0;
 }
 
 .title,
@@ -52,11 +53,6 @@ body {
 
 .track-info {
     text-align: center;
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-    margin: 20px auto;
     width: 80%;
     max-width: 500px;
 }
@@ -69,6 +65,46 @@ body {
 
 .player {
     display: block;
-    width: 80%;
+    width: 50%;
     margin: 20px auto;
+}
+
+.control-button {
+    background-color: #4CAF50;
+    /* Green background */
+    border: none;
+    /* Remove border */
+    color: white;
+    /* White text */
+    padding: 15px 32px;
+    /* Some padding */
+    text-align: center;
+    /* Centered text */
+    text-decoration: none;
+    /* Remove underline */
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    /* Mouse pointer on hover */
+    border-radius: 12px;
+    /* Rounded corners */
+    transition-duration: 0.4s;
+    /* Transition effect */
+}
+
+.control-button:hover {
+    background-color: white;
+    /* White background */
+    color: black;
+    /* Black text */
+}
+
+#canvas {
+    padding: 20px;
+    background-color: #fff;
+    margin: 20px auto;
+    width: 80%;
+    height: 40%;
+    max-width: 500px;
 }