2 en

index.html

@@ -23,7 +23,7 @@
                     <input type="file" id="musicFile" accept=".mp3,.wav,.m4a,.flac">
                 </td>
                 <td>
-                    <input type="button" name="startStop" value="暂停" id="startStop">
+                    <input type="button" name="startStop" value="Pause" id="startStop">
                 </td>
                 <td>
                     <p>Upload background image👉</p>

js/player.js

@@ -19,21 +19,16 @@ window.onload = function () {
     wrap.height = window.innerHeight - 1;
     let canvasCtx = wrap.getContext("2d");
     let AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
-    let audioContext = new AudioContext(); //实例化
-
-    // 加白色阴影
+    let audioContext = new AudioContext();
     canvasCtx.shadowColor = "white";
     canvasCtx.shadowBlur = 10;
-
     $('#bgFile').change(function () {
         if (this.files.length <= 0) return;
-
         if (this.files[0].size > 5242880) {
             console.log('File size larger than 5M');
             alert('Too large!');
             return;
         }
-
         let file = this.files[0];
         let reader = new FileReader();
         reader.readAsDataURL(file);
@@ -43,68 +38,59 @@ window.onload = function () {
     });
 
     $('#musicFile').change(function () {
-        //当选择歌曲时，判断当前audioContext的状态，如果在进行中则关闭音频环境，
-        //释放audioContext的所有资源，并重新实例化audioContext
         if (audioContext.state == 'running') {
             audioContext.close();
             audioContext = new AudioContext();
         }
-
         if (this.files.length == 0) return;
         let file = $('#musicFile')[0].files[0];
         let fileReader = new FileReader();
         fileReader.readAsArrayBuffer(file);
         fileReader.onload = function (e) {
             let count = 0;
-            $('#tip').text('开始解码')
+            $('#tip').text('Start decoding')
             let timer = setInterval(function () {
                 count++;
-                $('#tip').text('解码中,已用时' + count + '秒')
+                $('#tip').text('In decoding, already used ' + count + ' s')
             }, 1000)
             audioContext.decodeAudioData(e.target.result, function (buffer) {
                 clearInterval(timer)
-                $('#tip').text('解码成功，用时共计:' + count + '秒');
+                $('#tip').text('Decoded successfully, total time: ' + count + ' s');
                 let audioBufferSourceNode = audioContext.createBufferSource();
                 let analyser = audioContext.createAnalyser();
                 audioBufferSourceNode.connect(analyser);
                 analyser.connect(audioContext.destination);
                 audioBufferSourceNode.buffer = buffer;
                 audioBufferSourceNode.start();
-
-                //播放暂停音频
                 startStop.onclick = function () {
                     if (audioContext.state === 'running') {
                         audioContext.suspend().then(function () {
-                            $("#startStop").val('播放');
+                            $("#startStop").val('Play');
                         });
                     } else if (audioContext.state === 'suspended') {
                         audioContext.resume().then(function () {
-                            $("#startStop").val('暂停');
+                            $("#startStop").val('Pause');
                         });
                     }
                 }
                 let oW = wrap.width;
                 let oH = wrap.height;
-
-                //设置线条的颜色
                 let color1 = canvasCtx.createLinearGradient(oW / 2, oH / 2 - 10, oW / 2, oH / 2 - 150);
                 color1.addColorStop(0, '#1E90FF');
                 color1.addColorStop(.25, '#FF7F50');
                 color1.addColorStop(.5, '#8A2BE2');
                 color1.addColorStop(.75, '#4169E1');
                 color1.addColorStop(1, '#00FFFF');
-
                 let color2 = canvasCtx.createLinearGradient(0, 0, oW, oH);
                 color2.addColorStop(0, '#1E90FF');
                 color2.addColorStop(.25, '#FFD700');
                 color2.addColorStop(.5, '#8A2BE2');
                 color2.addColorStop(.75, '#4169E1');
                 color2.addColorStop(1, '#FF0000');
-
                 let output = new Uint8Array(180);
-                let du = 2;	//角度
-                let R = 200;	//半径
-                let W = 2;	//宽（线条的粗细）
+                let du = 2;
+                let R = 200;
+                let W = 2;
                 (function drawSpectrum() {
                     analyser.getByteFrequencyData(output);
                     canvasCtx.clearRect(0, 0, wrap.width, wrap.height);
@@ -116,16 +102,13 @@ window.onload = function () {
                         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.strokeStyle = color1;
                         canvasCtx.stroke();
                     }
-
-                    //设置字体样式颜色
-                    canvasCtx.font = "italic bold 20px 微软雅黑";
-                    canvasCtx.fillStyle = color2;		// 设置颜色
-                    canvasCtx.textAlign = "center";		// 设置水平对齐方式
-                    canvasCtx.textBaseline = "middle";	// 设置垂直对齐方式
-                    // 绘制文字（参数：要写的字，x坐标，y坐标）
+                    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);
                 })();