fix resize

js/player.js

@@ -41,10 +41,6 @@ function closeFullscreen() {
 }
 
 window.onload = function () {
-    $('#upl').hover(function () {
-        $(this).removeClass("first");
-    });
-
     wrap.width = window.innerWidth - 1;
     wrap.height = window.innerHeight - 1;
     let canvasCtx = wrap.getContext("2d");
@@ -52,6 +48,11 @@ window.onload = function () {
     let audioContext = new AudioContext();
     canvasCtx.shadowColor = "white";
     canvasCtx.shadowBlur = 10;
+
+    $('#upl').hover(function () {
+        $(this).removeClass("first");
+    });
+
     $('#bgFile').change(function () {
         if (this.files.length <= 0) return;
         if (this.files[0].size > 5242880) {
@@ -142,6 +143,34 @@ window.onload = function () {
                     canvasCtx.fillText(file.name.split('.mp3')[0], oW / 2, oH / 2);
                     requestAnimationFrame(drawSpectrum);
                 })();
+
+                $(window).resize(function () {
+                    wrap.width = window.innerWidth - 1;
+                    wrap.height = window.innerHeight - 1;
+                    let oW = wrap.width;
+                    let oH = wrap.height;
+                    (function drawSpectrum() {
+                        analyser.getByteFrequencyData(output);
+                        canvasCtx.clearRect(0, 0, wrap.width, wrap.height);
+                        for (let i = 0; i < 360; i++) {
+                            let value = output[i] / 10;
+                            canvasCtx.beginPath();
+                            canvasCtx.lineWidth = W;
+                            Rv1 = (R - value);
+                            Rv2 = (R + value);
+                            canvasCtx.moveTo((Math.sin((i * du) / 180 * Math.PI) * Rv1 + oW / 2), -Math.cos((i * du) / 180 * Math.PI) * Rv1 + oH / 2);
+                            canvasCtx.lineTo((Math.sin((i * du) / 180 * Math.PI) * Rv2 + oW / 2), -Math.cos((i * du) / 180 * Math.PI) * Rv2 + oH / 2);
+                            canvasCtx.strokeStyle = color1;
+                            canvasCtx.stroke();
+                        }
+                        canvasCtx.font = "italic bold 20px Microsoft Yahei";
+                        canvasCtx.fillStyle = color2;
+                        canvasCtx.textAlign = "center";
+                        canvasCtx.textBaseline = "middle";
+                        canvasCtx.fillText(file.name.split('.mp3')[0], oW / 2, oH / 2);
+                        requestAnimationFrame(drawSpectrum);
+                    })();
+                });
             })
         }
     })