Audio Visualization

by muztv

HTML

<img src="https://cdn.discordapp.com/attachments/312682116657840141/656548078131609615/SPOILER_WhatsApp_Image_2019-12-02_at_15.43.05.png"/>

CSS

/* canvas { border: 1px solid black; display: block; } */
* {
  transition: all 70ms;
}

img {
  position: fixed;
  top: -100px;
}

body {
  perspective: 1500px;
}

JavaScript

var AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var analyser = context.createAnalyser();

var numPoints = analyser.frequencyBinCount;
var audioDataArray = new Uint8Array(numPoints);



var img = document.querySelector("img")
let size = 5

setInterval(() => {
	analyser.getByteFrequencyData(audioDataArray);
  
    // draw a point every size pixels
    const width = 100;
    const height = 100;
    
    const s = [];
        
  for (let x = 0; x < width; x += size) {
    const ndx = x * numPoints / width | 0;
    const audioValue = audioDataArray[ndx] / 255;
    const y = audioValue * height;
    s.push(y)
  }
  
	img.style.transform = `scale3d(${s[0]/10}, ${s[1]/40}, ${s[2]/10}) rotate3d(${s[4]}, ${s[5]}, ${s[6]}, ${s[7]}deg)`
  
  
}, 30)

var audio = new Audio();
audio.loop = true;
audio.autoplay = true;
audio.crossOrigin = "anonymous";
audio.addEventListener('canplay', handleCanplay);
audio.src = "https://snek.solleo1995.now.sh/static/media/sore4.8f799e44.mp3";
audio.volume = 0.4
audio.load();


function handleCanplay() {
  const source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
}