index.js

let emojis = [];
const song = "anti.mp3";
populateEmojis();

let flag = false;
let count = 0;

if (! window.AudioContext) {
    if (! window.webkitAudioContext) {
        alert('no audiocontext found');
    }
    window.AudioContext = window.webkitAudioContext;
}
const context = new AudioContext();
let audioBuffer;
let sourceNode;
let analyser;
let javascriptNode;

// get the context from the canvas to draw on
const canvas = document.getElementById("disp");
const ctx = document.getElementById("disp").getContext("2d");

ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.scale(4,4);
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

let pos = calcPos();
// load the sound
setupAudioNodes();
loadSound(song);


function setupAudioNodes() {
    // setup a javascript node
    javascriptNode = context.createScriptProcessor(2048, 1, 1);
    // connect to destination, else it isn't called
    javascriptNode.connect(context.destination);

    // setup a analyzer
    analyser = context.createAnalyser();
    analyser.smoothingTimeConstant = 0.3;
    analyser.fftSize = 512;

    // create a buffer source node
    sourceNode = context.createBufferSource();
    sourceNode.connect(analyser);
    analyser.connect(javascriptNode);

    sourceNode.connect(context.destination);
}

function loadSound(url) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    // When loaded decode the data
    request.onload = function() {

        // decode the data
        context.decodeAudioData(request.response, function(buffer) {
            // when the audio is decoded play the sound
            playSound(buffer);
        }, onError);
    }
    request.send();
}


function playSound(buffer) {
    sourceNode.buffer = buffer;
    sourceNode.start(0);
}

function onError(e) {
    console.log(e);
}

javascriptNode.onaudioprocess = function() {
    // get the average for the first channel
    var array =  new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSpectrum(array);
    count++;
    if (count >= 20) {
        count = 0;
        pos = calcPos();
        document.body.style.background = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`
    }
}


// javascriptNode.onaudioprocess = function() {
        // ctx.clearRect(0, 0, 1000, 500);
//     // get the average for the first channel
//     var array =  new Uint8Array(analyser.frequencyBinCount);
//     analyser.getByteFrequencyData(array);
//     drawSpectrum(array);
// }


function drawSpectrum(array) {
    for ( var i = 1; i < (array.length); i+= 1){
        var value = array[i];
        ctx.font = `${value*0.3}px serif`;
        ctx.fillText(emojis[i % emojis.length], pos[i].x, pos[i].y);
    }
};

const val = {
    "song": song
}
fetch("http://localhost:3000/emojitext", {
    method: "POST",
    mode: "no-cors",
    headers: {
        'Accept': 'application/json',
        "Content-Type": "application/json",
        "apikey": "key"
    },
    body: JSON.stringify(val)
})

function calcPos() {
    let posi = [];
    for (let i = 0; i < 256; i++) {
        let x = Math.floor(Math.random() * canvas.width)
        let y = Math.floor(Math.random() * canvas.height)
        posi.push({
            x,
            y
        })
    }
    return posi;
}

function populateEmojis() {
    switch(song) {
        case "wake.mp3": emojis = [ '👀',
        '🆙',
        '🌐',
        '😀',
        '🎗',
        '👐',
        '💨',
        '🤔',
        '😀',
        '🖕',
        '😀',
        '👁',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '🎗',
        '🉐',
        '🤗',
        '⛈',
        '🏫',
        '😀',
        '🆙',
        '😀',
        '💆‍♂️',
        '🦘',
        '😀',
        '🛏',
        '🔮',
        '🥍',
        '🧵',
        '🧵',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '😀',
        '⛅',
        '😀',
        '🚪',
        '👐',
        '🙏',
        '😀',
        '🈁',
        '🎗',
        '😀',
        '💟',
        '🙏',
        '😀',
        '🈁',
        '😀',
        '🐑',
        '🙏',
        '😀',
        '🈁',
        '💤',
        '⛅',
        '👽',
        '🎗',
        '😀',
        '😡',
        '😀',
        '👀',
        '👋',
        '👋',
        '😀',
        '🉐',
        '🎗',
        '😀',
        '😀',
        '🏺',
        '🏺',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '😀',
        '⛅',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '😀',
        '⛅' ]; break;
        case "yesterday.mp3": emojis = [ '😀',
        '🈁',
        '😀',
        '👨',
        '😀',
        '😀',
        '😀',
        '🗣',
        '😀',
        '😀',
        '💟',
        '🎴',
        '🀄',
        '😀',
        '🚩',
        '😀',
        '😀',
        '🗣',
        '😀',
        '😀',
        '💟',
        '🎴',
        '🀄',
        '😀',
        '🚩',
        '😀' ]; break;
        case "frozen.mp3": emojis = [ '⛷',
        '⚪',
        '🔛',
        '⛰',
        '💟',
        '👸',
        '💨',
        '💟',
        '👼',
        '👀',
        '🆗',
        '👧',
        '🈶',
        '🔙',
        '🚪',
        '😀',
        '😦',
        '🗣',
        '😡',
        '🔛',
        '🥶',
        '😀',
        '🔙',
        '🚪',
        '😄' ]; break;
        case "viva.mp3": emojis = [ '😀',
        '🌐',
        '😀',
        '🌅',
        '😀',
        '🛏',
        '😀',
        '😀',
        '🧻',
        '🎲',
        '😀',
        '👀',
        '👂',
        '🎙',
        '🔘',
        '👑',
        '⚱',
        '👑',
        '1️⃣',
        '😀',
        '🔑',
        '➡️',
        '🔛',
        '😀',
        '😀',
        '😀',
        '🧂',
        '🏖',
        '😀',
        '👂',
        '😀',
        '😀',
        '🤺',
        '🛡',
        '😀',
        '😀',
        '😀',
        '🌐',
        '🐺',
        '💨',
        '👇',
        '😀',
        '🔉',
        '👨‍👧‍👧',
        '😦',
        '🚏',
        '😀',
        '💆‍♂️',
        '🔛',
        '🔛',
        '🧵',
        '👑',
        '😀',
        '👂',
        '😀',
        '😀',
        '🤺',
        '🛡',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '🌐',
        '😀',
        '👂',
        '😀',
        '😀',
        '🤺',
        '🛡',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '🌐' ]; break;
        case "7.mp3": emojis = [ '🥣',
        '👯',
        '💟',
        '♦️',
        '🏧',
        '🛍',
        '😀',
        '📑',
        '〽️',
        '💩',
        '😀',
        '💔',
        '😀',
        '🆙',
        '✏️',
        '😀',
        '💟',
        '😀',
        '✏️',
        '😦',
        '😀',
        '🎙',
        '😀',
        '🛑',
        '😀',
        '🧣',
        '😀',
        '💟',
        '😀',
        '💈',
        '😀',
        '👀',
        '😀',
        '💟',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '💟',
        '😀',
        '💈',
        '😀',
        '👀',
        '😀',
        '💟',
        '😀',
        '😀',
        '💍',
        '❎',
        '♦️',
        '6️⃣',
        '😀',
        '😀',
        '😀',
        '🤔',
        '😀',
        '🆕',
        '💱',
        '🈶',
        '💱',
        '🗣',
        '😀',
        '🗣',
        '😀',
        '😌',
        '😀',
        '😄',
        '😀',
        '↕️',
        '🎇',
        '😀',];break;
        case "sos.mp3": emojis = [ '👂',
        '😀',
        '🆘',
        '😀',
        '😀',
        '🤯',
        '🛏',
        '2️⃣',
        '🛁',
        '💷',
        '🌿',
        '👝',
        '😀',
        '💟',
        '😀',
        '🆙',
        '🚇',
        '😀',
        '😀',
        '💉',
        '➕',
        '😀',
        '😀',
        '🆙',
        '🚇',
        '😀',
        '😀',
        '💉',
        '➕',
        '➕',
        '➕',
        '😀',
        '🉐',
        '😀',
        '🛏',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '💟',
        '😀',
        '🆙',
        '🚇',
        '😀',
        '😀',
        '💉',
        '➕',
        '😀',
        '😀',
        '🆙',
        '🚇',
        '😀',
        '😀',
        '💉',
        '➕',
        '😀',
        '😀',
        '🆙',
        '🚇',
        '😀',
        '😀',
        '💉',
        '➕',
        '➕',
        '➕',
        '➕',
        '➕',
        '👂',
        '😀',
        '🆘',
        '😀',
        '😀',
        '🤯',
        '🛏' ]; break;
        case "bury_a_friend.mp3": emojis = [ '😦',
        '😀',
        '😀',
        '😦',
        '😦',
        '🙀',
        '😀',
        '😀',
        '⛅',
        '🈁',
        '🗣',
        '😦',
        '😀',
        '☠',
        '↕️',
        '👇',
        '💟',
        '😀',
        '💟',
        '😀',
        '🔚',
        '😀',
        '🔛',
        '🥃',
        '👅',
        '🐕',
        '⏰',
        '🆙',
        '🐕',
        '😀',
        '🔚',
        '😀',
        '😀',
        '🔚',
        '😀',
        '😀',
        '😀',
        '😀',
        '🔚',
        '😀',
        '😀',
        '😀',
        '😀',
        '😦',
        '😀',
        '😀',
        '😦',
        '😦',
        '🙀',
        '😀',
        '😀',
        '⛅',
        '👂',
        '🔦',
        '😦',
        '😀',
        '😀',
        '🎨',
        '⭐',
        '🉐',
        '▶️',
        '🆕',
        '⛅',
        '🎗',
        '😀',
        '😀',
        '⚱',
        '📲',
        '⛔',
        '😀',
        '💆‍♂️',
        '👇',
        '🐕',
        '▶️',
        '😀',
        '😀',
        '🎗',
        '😀',
        '🗣',
        '❎',
        '❎',
        '😀',
        '🗣',
        '❎',
        '😀',
        '👌',
        '😀',
        '👀',
        '😀',
        '🗣',
        '❎',
        '😀',
        '🗣',
        '❎']; break;
        case "bad_guy.mp3": emojis = [ '⚪',
        '👔',
        '🔴',
        '😀',
        '👃',
        '😴',
        '🔛',
        '💟',
        '❎',
        '1️⃣',
        '🤔',
        '🦹‍♂️',
        '🔛',
        '😀',
        '🗣',
        '🙏',
        '😀',
        '😦',
        '😀',
        '😀',
        '💂',
        '💟',
        '💂',
        '🉐',
        '💂',
        '💂',
        '〽️',
        '⌨',
        '💔',
        '⌨',
        '🗯',
        '👪',
        '⌨',
        '〽️',
        '💂',
        '〽️',
        '💂',
        '😀',
        '💟',
        '😀',
        '🀄',
        '🏇',
        '😀',
        '🎙',
        '😀',
        '🎙',
        '🙆‍♂️',
        '😀',
        '💂',
        '💟',
        '🇮🇹',
        '💂',
        '🉐',
        '💂',
        '💂',
        '〽️',
        '⌨',
        '💔',
        '⌨',
        '🗯',
        '👪',
        '⌨',
        '〽️',
        '💂',
        '〽️',
        '💂',
        '🆗',
        '〽️',
        '〽️',
        '😀',
        '💟',
        '🉐',
        '🗯',
        '😀',
        '😆',
        '🙀',
        '😀',
        '😀',
        '😏',
        '😀',
        '👀',
        '😦',
        '🎗',
        '〽️',
        '💂',
        '〽️',
        '💂',
        '〽️',
        '💂',
        '〽️',
        '💂',
        '〽️' ];break;
        case "dance_monkey.mp3": emojis = [ '🗣',
        '😀',
        '😀',
        '👀',
        '↕️',
        '🎇',
        '🖖',
        '😀',
        '🚩',
        '😀',
        '😀',
        '⚱',
        '😀',
        '😀',
        '👀',
        '1️⃣',
        '➕',
        '🕧',
        '😀',
        '👀',
        '👀',
        '👀',
        '🕧',
        '😀',
        '😀',
        '😀',
        '💟',
        '💈',
        '😀',
        '😀',
        '😀',
        '😢',
        '😀',
        '👀',
        '1️⃣',
        '➕',
        '🕧',
        '😀',
        '🗣',
        '😀',
        '😀',
        '😀',
        '🗣',
        '😀',
        '😀',
        '😀',
        '🇮🇹',
        '😀',
        '😀',
        '😀',
        '👀',
        '🚷',
        '😀',
        '🧤',
        '😀',
        '👀',
        '😀',
        '😀',
        '👀',
        '💟',
        '🐒',
        '😀',
        '🧬',
        '👀',
        '😀',
        '1️⃣',
        '➕',
        '🕧',
        '😀',
        '👀',
        '👀',
        '👀',
        '🕧',
        '😀',
        '😀',
        '😀',
        '💟',
        '💈',
        '😀',
        '😀',
        '😀',
        '😢',
        '😀',
        '👀',
        '1️⃣',
        '➕',
        '🕧',
        '😀',
        '🗣',
        '😀',
        '😀',
        '😀',
        '🗣',
        '😀',
        '😀',
        '😀',
        '🗣',
        '😀']; break;
        case "fire.mp3": emojis = [ '👀',
        '🆙',
        '🌐',
        '😀',
        '🎗',
        '👐',
        '💨',
        '🤔',
        '😀',
        '🖕',
        '😀',
        '👁',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '🎗',
        '🉐',
        '🤗',
        '⛈',
        '🏫',
        '😀',
        '🆙',
        '😀',
        '💆‍♂️',
        '🦘',
        '😀',
        '🛏',
        '🔮',
        '🥍',
        '🧵',
        '🧵',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '😀',
        '⛅',
        '😀',
        '🚪',
        '👐',
        '🙏',
        '😀',
        '🈁',
        '🎗',
        '😀',
        '💟',
        '🙏',
        '😀',
        '🈁',
        '😀',
        '🐑',
        '🙏',
        '😀',
        '🈁',
        '💤',
        '⛅',
        '👽',
        '🎗',
        '😀',
        '😡',
        '😀',
        '👀',
        '👋',
        '👋',
        '😀',
        '🉐',
        '🎗',
        '😀',
        '😀',
        '🏺',
        '🏺',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '🇮🇹',
        '😀',
        '⛅',
        '💟',
        '🌜',
        '🌐',
        '🗣',
        '🎗',
        '😀',
        '⛅' ];break;
        case "bday.mp3": emojis = [ '🎂',
        '🎂',
        '😀',
        '⚱',
        '😀',
        '😀',
        '😦',
        '😀',
        '😀',
        '🇮🇹',
        '😀',
        '🆙',
        '💩',
        '🆙',
        '😀',
        '😀',
        '🎂',
        '🅰️',
        '😀',
        '😀',
        '🎂',
        '🅰️',
        '😀',
        '⚱',
        '😀',
        '😀',
        '⚱',
        '😀',
        '😀',
        '😀',
        '🎂',
        '🅰️',
        '😀',
        '😀',
        '🎂',
        '🅰️',
        '🅰️',
        '😀',
        '📦',
        '🇮🇹',
        '🔪',
        '🅰️',
        '😀',
        '😀',
        '😀',
        '🧻',
        '👧',
        '😀',
        '🅰️',
        '💈',
        '💈',
        '💈',
        '🔛',
        '🅰️',
        '👀',
        '😀',
        '➕',
        '🇵🇰',
        '💣',
        '💣',
        '🅰️',
        '💊',
        '💣',
        '👀',
        '😀',
        '⚱',
        '😀',
        '💎',
        '😀',
        '⚱',
        '😀',
        '😀',
        '🛐',
        '2️⃣',
        '😀',
        '⚱',
        '😀',
        '➡️',
        '2️⃣',
        '😀',
        '😦',
        '😀',
        '😀',
        '🇮🇹',
        '😀',
        '🆙',
        '💩',
        '🆙',
        '😀',
        '😀',
        '🎂',
        '🅰️',
        '😀',
        '😀',
        '🎂',
        '🅰️',
        '😀',
        '⚱',
        '😀',
        '😀']; break;
        case "anti.mp3": emojis = [ '🆒',
        '👨‍👧‍👧',
        '🎗',
        '🔞',
        '😀',
        '👇',
        '🔛',
        '😀',
        '🔋',
        '❎',
        '😀',
        '🚭',
        '🈁',
        '🍾',
        '😀',
        '🖖',
        '➕',
        '😀',
        '🎓',
        '🗨',
        '😀',
        '🆙',
        '👇',
        '😀',
        '🔭',
        '😀',
        '🧠',
        '🔘',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '🔛',
        '🔛',
        '🔛',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '🈚',
        '😀',
        '🔞',
        '🆙',
        '😀',
        '😀',
        '😀',
        '😀',
        '🔛',
        '🔛',
        '🔛',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '🈚',
        '😀',
        '🔞',
        '😀',
        '😀',
        '↕️',
        '😀',
        '🔎',
        '😀',
        '🔎',
        '🎫',
        '⏰',
        '🆙',
        '▶️',
        '🕛',
        '▶️',
        '🕛',
        '📦',
        '😀',
        '🆙',
        '▶️',
        '😀',
        '😀',
        '➕',
        '🔙',
        '💟',
        '😀',
        '😀',
        '👊',
        '🔙',
        '👦',
        '🏳',
        '🔭']; break;
        case "rapgod.mp3": emojis = [ 
        '👀',
        '😀',
        '🔛',
        '🤕',
        '🉐',
        '1️⃣',
        '😀',
        '6️⃣',
        '🔛',
        '💟',
        '😀',
        '😦',
        '😦',
        '😀',
        '🤔',
        '🗣',
        '😦',
        '💉',
        '💟',
        '😀',
        '👨‍👧‍👧',
        '🔙',
        '🔙',
        '📦',
        '📦',
        '😀',
        '💟',
        '🤖',
        '😀',
        '😀',
        '💟',
        '💻',
        '😀',
        '😀',
        '💻',
        '😀',
        '🔙',
        '😀',
        '😀',
        '💳',
        '🏢',
        '🔛',
        '🖕',
        '🦘',
        '🉐',
        '🧳',
        '🍎',
        '🔙',
        '🎒',
        '🕧',
        '😀',
        '💔',
        '🔙',
        '👫',
        '😀',
        '😀',
        '😀',
        '😀',
        '👊',
        '🕧',
        '〽️',
        '💟',
        '😀',
        '👨‍👧‍👧',
        '🔙',
        '🔙',
        '📦',
        '📦',
        '😀',
        '📺',
        '💩',
        '🔑',
        '㊙️',
        '💟',
        '😀',
        '🈶',
        '😡',
        '👊']; break;
        case "daclub.mp3": emojis = [ '🎂',
        '🎉',
        '💟',
        '🎂',
        '💟',
        '🎂',
        '🎂',
        '🔎',
        '😀',
        '🍾',
        '🈵',
        '👀',
        '😀',
        '❌',
        '💉',
        '😀',
        '💟',
        '😀',
        '🤗',
        '🔎',
        '😀',
        '🍾',
        '🈵',
        '👀',
        '😀',
        '❌',
        '💉',
        '😀',
        '💟',
        '😀',
        '🤗',
        '😀',
        '🆙',
        '👀',
        '🔛',
        '😀',
        '🧻',
        '😀',
        '📺',
        '😀',
        '💟',
        '💟',
        '🈚',
        '👇',
        '🆙',
        '😀',
        '👀',
        '🧻',
        '🌿',
        '🆙',
        '⌚',
        '😀',
        '😀',
        '👊',
        '😀',
        '🥵',
        '💟',
        '😀',
        '😀',
        '💟',
        '😀',
        '💟',
        '💟',
        '🆕',
        '🎴',
        '👨',
        '😀',
        '💱',
        '🔛',
        '😀',
        '🤯',
        '😀',
        '🔛',
        '😀',
        '💈',
        '😀',
        '🉐',
        '🔎',
        '😀',
        '🍾',
        '🈵',
        '👀',
        '😀',
        '❌',
        '💉',
        '😀',
        '💟',
        '😀',
        '🤗',
        '🔎',
        '😀']; break;
        case "old.mp3": emojis = [ '😀',
        '🐴',
        '🔘',
        '🛣',
        '😀',
        '❎',
        '➕',
        '😀',
        '🐴',
        '🔘',
        '🛣',
        '😀',
        '❎',
        '➕',
        '😀',
        '🔙',
        '🐴',
        '🎓',
        '⚫',
        '⚫',
        '🔛',
        '🐴',
        '😀',
        '🆙',
        '😀',
        '😀',
        '😀',
        '😀',
        '🔛',
        '🚜',
        '😀',
        '🔛',
        '😀',
        '👶',
        '😀',
        '🧬',
        '🎦',
        '🎓',
        '🔛',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '😀',
        '🐴',
        '🔘',
        '🛣',
        '😀',
        '➕',
        '😀',
        '🐴',
        '🔘',
        '🛣',
        '😀',
        '❎',
        '➕',
        '😀' ]; break;
    }
}