textColorOnBackground

front-example/html.html

@@ -26,7 +26,7 @@
                             <h1 class="title-song"></h1><h1 class="title-album"></h1>
                         </a>
                         <a href="" class="artist-url">
-                            <p class="name-artist"></p>
+                            <h1 class="name-artist"></h1>
                         </a>
                     </div>
 

front-example/player.js

@@ -3,8 +3,19 @@ function secondsToMinutesAndSeconds(seconds) {
     const remainingSeconds = seconds % 60;
     return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
 }
+
+function textColorOnBackground(rgb) {
+    var r = rgb[0] / 255;
+    var g = rgb[1] / 255;
+    var b = rgb[2] / 255;
+    if (0.2126 * r + 0.7152 * g + 0.0722 * b > 0.5) {
+        return 'black';
+    } else {
+        return 'white';
+    }
+}
+
 function fetchDataAndAnimate() {
-    // fetch('http://192.168.1.58:3005/music/get')
     fetch('https://api.noh.am/music/get')
         .then(response => response.json())
         .then(data => {
@@ -21,16 +32,25 @@ function fetchDataAndAnimate() {
             const duration = parseFloat(data.duration);
             const status = data.status;
             const dominantcolor = data.dominantcolor;
+            const textColor = textColorOnBackground(dominantcolor);
+            
+            const lastTime = document.querySelector('.last-time');
+            lastTime.style.color = textColor;
+            const totalTime = document.querySelector('.total-time');
+            totalTime.style.color = textColor;
 
             const titleSongElement = document.querySelector('.title-song');
             // titleSongElement.textContent = name;
             titleSongElement.textContent = `${name} - `
+            titleSongElement.style.color = textColor;
 
             const titleAlbumElement = document.querySelector('.title-album');
             titleAlbumElement.textContent = album;
+            titleAlbumElement.style.color = textColor;
 
             const artistSongElement = document.querySelector('.name-artist');
             artistSongElement.textContent = artist;
+            artistSongElement.style.color = textColor;
 
             const artworkElement = document.querySelector('.artwork_url');
             artworkElement.src = artwork_url;
@@ -60,6 +80,7 @@ function fetchDataAndAnimate() {
                     const style = window.getComputedStyle(element, '::after');
                     const currentWidth = parseFloat(style.getPropertyValue('width'));
                     element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
+                    element.style.setProperty('--new-color', textColor);
                 });
 
                 let intervalId;
@@ -71,6 +92,7 @@ function fetchDataAndAnimate() {
                     const trackElements = document.querySelectorAll('.track');
                     trackElements.forEach(element => {
                         element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
+                        element.style.setProperty('--new-color', textColor);
                     });
                     pPosition++;
                     if (pPosition > duration) {
@@ -94,6 +116,7 @@ function fetchDataAndAnimate() {
                     const style = window.getComputedStyle(element, '::after');
                     const currentWidth = parseFloat(style.getPropertyValue('width'));
                     element.style.setProperty('--new-width', `100%`);
+                    element.style.setProperty('--new-color', textColor);
                 });
             }
         })

front-example/style.css

@@ -58,12 +58,11 @@ body * {
   border-radius: 10px;
 }
 
-
 .info {
   color: #E1E1E6;
 }
 
-.info p {
+.info .name-artist {
   opacity: 0.68;
   font-size: 19px;
 }
@@ -80,7 +79,6 @@ body * {
   padding-bottom: 7px;
 }
 
-
 .controls {
   display: flex;
   justify-content: space-between;
@@ -109,13 +107,12 @@ body * {
   height: 6px;
   width: var(--new-width);
   display: block;
-  background: #D9D9D9;
+  background: var(--new-color);
   border-radius: 10px;
 }
 
 .time {
-  opacity: 0.7;
-  font-size: 14px;
+  font-size: 15px;
   color: gainsboro;
   display: flex;
   justify-content: space-between;