update

Readiz · Jul 3, 2024 · a434e24 · a434e24
1 parent 92483c3
commit a434e24
Show file tree

Hide file tree

Showing 206 changed files with 403 additions and 303 deletions.
diff --git a/css/demo.css b/css/demo.css
@@ -10,6 +10,13 @@ body{
 -moz-osx-font-smoothing: grayscale;
   font-size: 15px;
   background: #eee;
+   overflow: hidden; /* Hide scrollbars */
+}
+/* This will make your loading-overlay UI transition out all fancy like */
+.hide-loading {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 1s, opacity 1s linear;
 }
 .intro{
    background: #fff;
@@ -88,8 +95,7 @@ a.btn:hover{
 }
 main{
   background: #fff;
-  padding:: 20px;
-
+  padding: 20px;
 }
 
 article li{
@@ -111,7 +117,7 @@ article p{
    font-size: 15px;
     line-height: 1.5;
 }
-
+/*  
 @media only screen and (min-width: 720px){
     main{
       max-width: 720px;
@@ -121,7 +127,7 @@ article p{
     }
 
 
-}
+} */
 
 .set-overlayer,
 .set-glass,

diff --git a/css/style.css b/css/style.css
@@ -10,7 +10,7 @@ a,a:hover,a:visited{color:#ddd;text-decoration:none;}
 
 /* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
 #simp button,#simp input,#simp img{border:0;}
-#simp{max-width:600px;font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
+#simp{font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
 #simp .simp-album{padding:20px 25px 5px;}
 #simp .simp-album .simp-cover{margin-right:20px;}
 #simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
@@ -25,7 +25,7 @@ a,a:hover,a:visited{color:#ddd;text-decoration:none;}
 #simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
 #simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
 #simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;}
-#simp .simp-controls .simp-volume{max-width:110px;}
+#simp .simp-controls .simp-volume{max-width:110px;display:none;}
 #simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}
 #simp .simp-controls .simp-others .simp-active{background:#242f3d;}
 #simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
@@ -42,7 +42,7 @@ a,a:hover,a:visited{color:#ddd;text-decoration:none;}
 #simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
 #simp .simp-hide{max-height:0;}
 /* playlist */
-#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
+#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:calc(100vh - 255px);}
 #simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
 #simp ul li:last-child{padding-bottom:13px;}
 #simp ul li:nth-child(odd){background:#0e1621;}
@@ -54,6 +54,7 @@ a,a:hover,a:visited{color:#ddd;text-decoration:none;}
 #simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
 #simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
 #simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
+#simp .simp-shide { display: none; }
 /* progress animation */
 @-webkit-keyframes audio-progress{to{background-position:25px 0;}}
 @keyframes audio-progress{to{background-position:25px 0;}}
@@ -64,4 +65,5 @@ a,a:hover,a:visited{color:#ddd;text-decoration:none;}
 }
 @media screen and (max-width:370px) {
 #simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
-}
+}
+#simp .simp-cover {display:none;}
diff --git a/getMusicList.js b/getMusicList.js
@@ -11,7 +11,9 @@ const writeFileSync = (filepath, str) => {
 
 console.log('Starting...');
 (async () => {
-    let paths = await glob.promise('./music/*', {});
+    let paths = await glob.promise('./music/**', {
+        nodir: true
+    });
     paths = paths.map(item => encodeURI(item));
     console.log(paths);
     writeFileSync('./musicList.json', JSON.stringify(paths, null, 2));

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="CodeHim">
-    <title>Audio Player with Playlist Example </title>
+    <title>Readiz's Player</title>
 
     <!-- Style CSS -->
     <link rel="stylesheet" href="css/style.css">
@@ -13,19 +13,47 @@
 
   </head>
   <body>
-<div style="display: flex; flex-direction: column; justify-content: center; height: 100vh">
- <div style="max-width: 570px" class="simple-audio-player" id="simp" data-config='{"shide_top":false,"shide_btm":false,"auto_load":true}'>
+<div>
+  <div id="loading-overlay" style="color: #f3f3f3;
+    position: absolute;
+    top: 0;
+    bottom: 0px;
+    width: 100%;
+    text-align: center;
+    background-color: black;
+    z-index: 9999;
+">
+    <div style="display: grid; height: 100%; text-align: center; vertical-align: middle;">
+        <h1 style="display: flex; flex-direction: column; place-content: flex-end;">Readiz's Player</h1>
+        <p>Click here to use</p>
+    </div>
+</div>
+ <div class="simple-audio-player" id="simp" data-config='{"shide_top":false,"shide_btm":false,"auto_load":true}'>
   <div class="simp-playlist">
     <ul id="ulist">
 
     </ul>
   </div>
-  <div class="simp-footer">Music is mostly from Blue Archive</div>
+  <div class="simp-footer">Song copyrights belong to its owner.</div>
 </div>
 </div>
+
 <!-- Audio Player JS -->
 <script  src="./js/script.js"></script>
-<script> 
+<script type="module">
+  import WaveSurfer from './node_modules/wavesurfer.js/dist/wavesurfer.esm.js'
+// const wavesurfer = WaveSurfer.create({
+//   container: '#waveform',
+//   waveColor: '#4F4A85',
+//   progressColor: '#383351',
+//   url: './music/theme_001-Constant Moderato.ogg',
+// })
+
+// wavesurfer.on('interaction', () => {
+//   wavesurfer.play()
+// })
+  window.WaveSurfer = WaveSurfer;
+
   function getRandomArbitrary(min, max) {
       return Math.random() * (max - min) + min;
   }
@@ -35,16 +63,24 @@
       let isFirst = true;
       for (const item of arr) {
           const name = unescape(String(item).substr(8).split('.ogg')[0].split('.mp3')[0].split('.m4a')[0]);
+          const artist = name.split('/')[0];
+          const songname = name.split('/')[1];
           const li = (isFirst) ?
-          `<li class="simp-active"><span class="simp-source" data-src="${item}">${name}</span><span class="simp-desc">Various Artists</span></li>`:
-          `<li><span class="simp-source" data-src="${item}">${name}</span><span class="simp-desc">Various Artists</span></li>`;
+          `<li class="simp-active"><span class="simp-source" data-src="${item}">${songname}</span><span class="simp-desc">${artist}</span></li>`:
+          `<li><span class="simp-source" data-src="${item}">${songname}</span><span class="simp-desc">${artist}</span></li>`;
           document.getElementById('ulist').innerHTML += li;
           isFirst = false;
       }
   }
   (async() => {
       await getMusics();
       BAPlayer();
+      // setTimeout(() => {
+      //     document.getElementById('loading-overlay').classList.add("hide-loading");
+      // }, 100)
+      document.getElementById('loading-overlay').addEventListener('click', function(event) {
+        document.getElementById('loading-overlay').classList.add("hide-loading");
+      });
   })();
 </script>
   </body>