You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.3 KiB
58 lines
1.3 KiB
window.onload = function() {
|
|
|
|
audio.src = 'http://stream.santic-zombie.ru';
|
|
audio.crossOrigin = "anonymous";
|
|
audio.load();
|
|
|
|
var context = new AudioContext();
|
|
var src = context.createMediaElementSource(audio);
|
|
var analyser = context.createAnalyser();
|
|
|
|
var canvas = document.getElementById("canvas");
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
src.connect(analyser);
|
|
analyser.connect(context.destination);
|
|
|
|
analyser.fftSize = 256;
|
|
|
|
var bufferLength = analyser.frequencyBinCount;
|
|
console.log(bufferLength);
|
|
|
|
var dataArray = new Uint8Array(bufferLength);
|
|
|
|
var WIDTH = canvas.width;
|
|
var HEIGHT = canvas.height;
|
|
|
|
var barWidth = (WIDTH / bufferLength) * 2.5;
|
|
var barHeight;
|
|
var x = 0;
|
|
|
|
function renderFrame() {
|
|
requestAnimationFrame(renderFrame);
|
|
|
|
x = 0;
|
|
|
|
analyser.getByteFrequencyData(dataArray);
|
|
|
|
// ctx.fillStyle = "rgba(60, 60, 60, 0)";
|
|
ctx.clearRect(0, 0, WIDTH, HEIGHT);
|
|
|
|
for (var i = 0; i < bufferLength; i++) {
|
|
barHeight = dataArray[i];
|
|
|
|
var r = barHeight + (25 * (i/bufferLength));
|
|
var g = 250 * (i/bufferLength);
|
|
var b = 50;
|
|
|
|
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
|
|
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
|
|
|
|
x += barWidth + 1;
|
|
}
|
|
}
|
|
|
|
renderFrame();
|
|
}
|
|
|