Skip to content

Instantly share code, notes, and snippets.

@ngochuy13

ngochuy13/audio-bg-animation

Created January 26, 2021 04:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ngochuy13/7a56c956352f27eec55b207b0f61a62c to your computer and use it in GitHub Desktop.
Save ngochuy13/7a56c956352f27eec55b207b0f61a62c to your computer and use it in GitHub Desktop.
Download ZIP
audio-bg-animation
Raw
audio-bg-animation
<html>
<body style="
background-color: #bfbfbf;
display: flex;
align-items: center;
justify-content: center;">
<img id="img" src="laptrinhvientv.jpg" style="
width: 200px;
border-radius: 50%;
" />
</body>
</html>
<script>
audio = new Audio();
audio.src = "xedangdithichay.mp3";
analyser = null;
document.onclick = () => {
context = new AudioContext();
analyser = context.createAnalyser();
context.createMediaElementSource(audio)
.connect(analyser);
analyser.connect(context.destination);
audio.play();
loop();
}
function loop() {
window.requestAnimationFrame(loop)
fbc = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc);
avg = fbc.reduce((a, b) => a + b, 0) / fbc.length;
document.getElementById('img').style.width = avg * 5;
document.body.style.backgroundColor = 'rgb(' + avg + ',' + avg + ',' + avg + ')';
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment