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