audio.js

var AudioContext = AudioContext || webkitAudioContext;
var context = new AudioContext;

var audios = document.getElementsByClassName("audio")
var audio = audios[2];

for (var i = 0; i < audios.length; i++) {
        audios[i].src = "music/music" + (i) + ".wav";
        audios[i].preload = "auto";
        audios[i].muted = true;
}

audio.muted = false;

var buttons = document.getElementsByClassName("button");

var volumeController = document.getElementById('volume');
volumeController.value = audio.volume;

var playRateController = document.getElementById('playRate');
playRateController.value = audio.playbackRate;

var filter = context.createBiquadFilter();

var panner = context.createPanner();

panner.panningModel = "HRTF";
panner.setPosition(1, 2, 3);

// Make sure to make one MediaElementSource per audio src
var elementSources = [];
for(var i = 0; i < audios.length; i++) {
  elementSources.push(context.createMediaElementSource(audios[i]))
}

// Use one of them as the default
var source = elementSources[2];
var analyser = context.createAnalyser();


source.connect(analyser);
source.connect(filter);
source.connect(panner)
panner.connect(context.destination)
filter.connect(context.destination);
filter.type = 'lowpass';
filter.frequency.value = 440;
analyser.connect(context.destination);

var screenHeight = document.body.clientHeight
var screenWidth = document.body.clientWidth;

var width = canvas.width;
var height = canvas.height;

var p = canvas.getContext("2d");

analyser.fftSize = 4096;
var length = analyser.fftSize;
var dataArray = new Uint8Array(length);


var button = document.getElementById("button");

button.addEventListener("click", () => {
    if (button.innerHTML == "Play") {
        button.innerHTML = "Pause";
        button.style.animation = "";
        for (let i = 0; i < audios.length; i++) {
            audios[i].play();
        }
    } else {
        button.innerHTML = "Play"
        for (let i = 0; i < audios.length; i++) {
            audios[i].pause();
        }

    }
})

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", () => {
        for (let m = 0; m < audios.length; m++) {
            audios[m].muted = true;
        }
        console.log(i);
        audios[i].muted = false;
        // Instead of creating them in here, we just assign the selected
        // source from the array
        source = elementSources[i];
        source.connect(analyser);
        analyser.connect(context.destination);
    })
}

volumeController.addEventListener('input', () => {
    audio.volume = parseFloat(volumeController.value);
})

playRateController.addEventListener('input', () => {
    audio.playbackRate = parseFloat(playRateController.value);
})

audio.oncanplaythrough = function () {
    if (screenWidth != width || screenHeight != height) {
        zoomPage();
    }
    draw();
};


var gradient = p.createLinearGradient(0, 100, 480, 100);
gradient.addColorStop("0", "#f500d8");
gradient.addColorStop("1.0", "#ceaf11");

var gradientRight = p.createLinearGradient(886, 100, 1366, 100);
gradientRight.addColorStop("0", "#0ee7f7");
gradientRight.addColorStop("1.0", "#2ce672");

function zoomPage() {
    var scaleX = (screenWidth / width).toPrecision(5),
        scaleY = (screenHeight / height).toPrecision(5);

    var style = document.createElement("style");
    document.head.appendChild(style);
    sheet = style.sheet;
    sheet.insertRule('body{transform-origin:0% 0%;transform:scale(' + scaleX + ',' + scaleY + ');}', 0);
}


function draw() {
    requestAnimationFrame(draw)
    analyser.getByteFrequencyData(dataArray);
    p.clearRect(0, 0, width, height);


    //left
    p.beginPath();
    p.moveTo(0, height - 200);
    var x = 0;
    for (var i = 1; i < 50; i++) {
        var lineHeight = dataArray[i] / 256 * height / 3;
        if (i < 5) {
            p.lineTo(x, height - dataArray[i] / 256 * height / 2 - 200)
        } else if (i > 40) {
            p.lineTo(x - 13, height - 200)
        } else {
            p.lineTo(x, height - lineHeight - 200)
        }
        x += 12;
    }
    p.fillStyle = gradient;
    p.fill();
    p.closePath();





    p.fillStyle = '#fff';
    p.fillRect(0, height - 300, 470, 101);

    p.beginPath();
    p.moveTo(0, height - 299);
    var x = 0;
    for (var i = 1; i < 41; i++) {
        var lineHeight = dataArray[i] / 256 * height / 50;
        if (i < 5) {
            p.lineTo(x, dataArray[i] / 256 * height / 24 + 380)
        } else p.lineTo(x, lineHeight + 380)
        x += 12;
    }
    p.lineTo(x - 12, height - 299)
    p.fillStyle = '#21dd13';

    p.shadowBlur = 20;
    p.shadowColor = "#21dd13";
    p.fill();
    p.closePath();
    p.shadowBlur = 0;


    //right
    p.beginPath();
    p.fillStyle = gradientRight;
    p.moveTo(width, height - 200);
    var x = width;
    for (var i = 1; i < 50; i++) {
        var lineHeight = dataArray[i] / 256 * height / 3;
        if (i < 5) {
            p.lineTo(x, height - dataArray[i] / 256 * height / 2 - 200)
        } else if (i > 40) {
            p.lineTo(x + 12, height - 200)
        } else {
            p.lineTo(x, height - lineHeight - 200)
        }
        x -= 12;
    }
    p.fill();
    p.closePath();


    p.fillStyle = '#fff';
    p.fillRect(width - 480, height - 300, 480, 100);


    p.beginPath();
    p.moveTo(width, height - 299);
    var x = width;
    for (var i = 1; i < 41; i++) {
        var lineHeight = dataArray[i] / 256 * height / 50;
        if (i < 5) {
            p.lineTo(x, dataArray[i] / 256 * height / 24 + 380)
        } else p.lineTo(x, lineHeight + 380)
        x -= 12;
    }
    p.lineTo(x + 12, height - 299)
    p.fillStyle = '#21dd13';

    p.shadowBlur = 20;
    p.shadowColor = "#21dd13";
    p.fill();
    p.closePath();
    p.shadowBlur = 0;

}