mercredi 4 novembre 2020

Audio Visualizer

I created an audio visualizer, and want to visualize audio in gradient, but can`t do it.

    var body, num, array, width, context, logo, myElements, analyzer, src, height;

    body = document.querySelector(`body`); 

    num = 64;

    array = new Uint8Array(num*2);

    width = 15;

    window.onclick = function(){
        if(context) return;

        body.querySelector(`h1`).remove();

        for(var i = 0; i < num; i++){
            logo = document.createElement(`div`);
            logo.className = `logo`;
            logo.style.background = //gradient must be here
            logo.style.minWidth = width + `px`;
            body.appendChild(logo);
        }

        myElements = document.getElementsByClassName(`logo`);
        context = new AudioContext();
        analyzer = context.createAnalyser();

        navigator.mediaDevices.getUserMedia({
            audio: true
        }).then(stream => {
            src = context.createMediaStreamSource(stream);
            src.connect(analyzer);
            loop();
        }).catch(error => {
            alert(error);
            location.reload();
        })
    }

    function loop(){
        window.requestAnimationFrame(loop);
        analyzer.getByteFrequencyData(array);
        for (let i = 0; i < num; i++) {
            height = array[i+num];
            myElements[i].style.minHeight = height + `px`;
            myElements[i].style.opacity = 0.008 * height;
        }
    }

It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.




Aucun commentaire:

Enregistrer un commentaire