sync ms

css/musicvision.css

@@ -6,17 +6,21 @@ td {
 }
 
 td:nth-child(2),
-td:nth-child(5) {
+td:nth-child(5),
+td:nth-child(7) {
     text-align: right;
 }
 
 td:nth-child(1),
 td:nth-child(3),
-td:nth-child(4),
 td:nth-child(6) {
     text-align: left;
 }
 
+td:nth-child(4) {
+    text-align: center;
+}
+
 table {
     table-layout: fixed;
 }
@@ -57,6 +61,14 @@ p,
     color: white;
 }
 
+#bgFile {
+    text-align-last: right;
+}
+
+#startStop {
+    text-align: center;
+}
+
 .bg {
     background-image: url('../src/bg.jpg');
     background-repeat: no-repeat;
@@ -72,11 +84,6 @@ p,
     z-index: -1;
 }
 
-#home {
-    text-decoration: none;
-    color: khaki;
-}
-
 td p,
 td a {
     font-size: x-small;

index.html

@@ -13,7 +13,7 @@
         <table border="0" width="100%">
             <tr>
                 <td>
-                    <a href="javascript:recover_bg();" id="home">Restore to initial background</p>
+                    <button id="fullscreen">Fullscreen</button>
                 </td>
                 <td>
                     <p id="tip">Upload audio to be visualized👉</p>
@@ -22,16 +22,16 @@
                     <input type="file" id="musicFile" accept=".mp3,.wav,.m4a,.flac">
                 </td>
                 <td>
-                    <input type="button" name="startStop" value="Pause" id="startStop">
+                    <input type="button" id="startStop" name="startStop" value="Pause">
                 </td>
                 <td>
-                    <p>Upload background image👉</p>
+                    <input type="file" id="bgFile" accept=".png,.jpg,.gif,.bmp">
                 </td>
                 <td>
-                    <input type="file" id="bgFile" accept=".png,.jpg,.gif,.bmp">
+                    <p>👈Upload background image</p>
                 </td>
                 <td>
-                    <button id="fullscreen">Fullscreen</button>
+                    <button id="home">Restore to initial background</button>
                 </td>
             </tr>
         </table>

js/player.js

@@ -30,7 +30,6 @@ function openFullscreen(elem) {
     } else if (elem.msRequestFullscreen) { // IE/Edge
         elem.msRequestFullscreen();
     }
-    document.getElementById("fullscreen").innerText = zh_CN ? "退出全屏" : "Exit fullscreen";
 }
 
 // exit fullscreen
@@ -44,17 +43,12 @@ function closeFullscreen() {
     } else if (document.msExitFullscreen) { // IE/Edge
         document.msExitFullscreen();
     }
-    document.getElementById("fullscreen").innerText = zh_CN ? "全屏" : "Fullscreen";
-}
-
-function isFullscreen() {
-    return document.fullscreenElement || window.innerWidth === window.screen.width || window.innerHeight === window.screen.height;
 }
 
 function loadFullscreen() {
     // fullscreen related
     document.getElementById("fullscreen").addEventListener("click", function () {
-        if (isFullscreen()) {
+        if (document.fullscreenElement) {
             closeFullscreen();
         } else {
             openFullscreen(document.documentElement);
@@ -62,14 +56,14 @@ function loadFullscreen() {
     });
 
     document.addEventListener('fullscreenchange', function () {
-        if (isFullscreen()) {
+        if (document.fullscreenElement) {
             document.getElementById("fullscreen").innerText = zh_CN ? "退出全屏" : "Exit fullscreen";
         } else {
             document.getElementById("fullscreen").innerText = zh_CN ? "全屏" : "Fullscreen";
         }
     });
 
-    if (isFullscreen()) {
+    if (document.fullscreenElement) {
         document.getElementById("fullscreen").innerText = zh_CN ? "退出全屏" : "Exit fullscreen";
     } else {
         document.getElementById("fullscreen").innerText = zh_CN ? "全屏" : "Fullscreen";
@@ -98,6 +92,10 @@ window.onload = function () {
     canvasCtx.shadowColor = "white";
     canvasCtx.shadowBlur = 10;
 
+    $("#home").click(function () {
+        recover_bg();
+    });
+
     $('#upl').hover(function () {
         $(this).removeClass("first");
     });
@@ -117,11 +115,13 @@ window.onload = function () {
     });
 
     $('#musicFile').change(function () {
-        if (audioContext.state == 'running') {
-            audioContext.close();
-            audioContext = new AudioContext();
+        if (this.files.length == 0) {
+            $("#tip").text(zh_CN ? "上传待可视化的音频👉" : "Upload audio to be visualized👉");
+            return;
         }
-        if (this.files.length == 0) return;
+        audioContext.close();
+        audioContext = new AudioContext();
+        $("#startStop").val(zh_CN ? '暂停' : 'Pause');
         let file = $('#musicFile')[0].files[0];
         let fileReader = new FileReader();
         fileReader.readAsArrayBuffer(file);