Spaces:
Running
Running
File size: 5,250 Bytes
9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff 5daada1 9cb88ff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
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);
})();
})
}
})
} |