js/player.js

function clearInputFiles(inputId) {
    var inputElement = document.getElementById(inputId);
    if (inputElement.files && inputElement.files.length > 0) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(inputElement.files[0]);
        reader.onload = function () {
            inputElement.value = '';
        };
    }
}

function recover_bg() {
    $(".bg").css("background-image", "url(./src/bg.jpg)");
    clearInputFiles("bgFile");
}

window.onload = function () {
    wrap.width = window.innerWidth - 1;
    wrap.height = window.innerHeight - 1;
    let canvasCtx = wrap.getContext("2d");
    let AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
    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);
        reader.onload = function () {
            $('.bg').css('background-image', 'url(' + reader.result + ')');
        };
    });

    $('#musicFile').change(function () {
        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('Start decoding')
            let timer = setInterval(function () {
                count++;
                $('#tip').text('In decoding, already used ' + count + ' s')
            }, 1000)
            audioContext.decodeAudioData(e.target.result, function (buffer) {
                clearInterval(timer)
                $('#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('Play');
                        });
                    } else if (audioContext.state === 'suspended') {
                        audioContext.resume().then(function () {
                            $("#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;
                (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);
                })();
            })
        }
    })
}