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 () {
        //当选择歌曲时，判断当前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('开始解码')
            let timer = setInterval(function () {
                count++;
                $('#tip').text('解码中,已用时' + count + '秒')
            }, 1000)
            audioContext.decodeAudioData(e.target.result, function (buffer) {
                clearInterval(timer)
                $('#tip').text('解码成功，用时共计:' + count + '秒');
                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('播放');
                        });
                    } else if (audioContext.state === 'suspended') {
                        audioContext.resume().then(function () {
                            $("#startStop").val('暂停');
                        });
                    }
                }
                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 微软雅黑";
                    canvasCtx.fillStyle = color2;		// 设置颜色
                    canvasCtx.textAlign = "center";		// 设置水平对齐方式
                    canvasCtx.textBaseline = "middle";	// 设置垂直对齐方式
                    // 绘制文字（参数：要写的字，x坐标，y坐标）
                    canvasCtx.fillText(file.name.split('.mp3')[0], oW / 2, oH / 2);
                    requestAnimationFrame(drawSpectrum);
                })();
            })
        }
    })
}