<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>audio analyzer - CSS Fractals</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button id="play">Play</button>
<input id="file" type="file" name="filechooser" accept="audio/*"/>
<p style="position:absolute;bottom:10px;right:10px;margin:0;">requires Google Chrome</p>
<h1 id="title">Please select an audio source</h1>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="_#{sections}">
<div>
<div>
<div>
<div class="two">
<div class="one">
<div class="three">
<div class="one">
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="two">
<div class="one">
<div class="one">
<div class="three"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<audio id="audio"></audio>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/ndAudio.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/audio-analyzer-css-fractals-avVwvm */
div {
position: absolute;
left: 100%;
bottom: 100%;
height: 100%/sqrt(2);
width: 100%/sqrt(2);
border-radius: 100% 0;
will-change: transform;
transform-origin: 0% 100%;
-webkit-box-reflect: left;
}
section {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 35px;
-webkit-box-reflect: below;
}
section._0 {
transform: translateX(-50%) rotate(0deg) translateX(150%);
}
section._1 {
transform: translateX(-50%) rotate(30deg) translateX(150%);
}
section._2 {
transform: translateX(-50%) rotate(60deg) translateX(150%);
}
section._3 {
transform: translateX(-50%) rotate(90deg) translateX(150%);
}
section._4 {
transform: translateX(-50%) rotate(120deg) translateX(150%);
}
section._5 {
transform: translateX(-50%) rotate(150deg) translateX(150%);
}
section._6 {
transform: translateX(-50%) rotate(180deg) translateX(150%);
}
section._7 {
transform: translateX(-50%) rotate(210deg) translateX(150%);
}
section._8 {
transform: translateX(-50%) rotate(240deg) translateX(150%);
}
section._9 {
transform: translateX(-50%) rotate(270deg) translateX(150%);
}
section._10 {
transform: translateX(-50%) rotate(300deg) translateX(150%);
}
section._11 {
transform: translateX(-50%) rotate(330deg) translateX(150%);
}
body {
background: #000;
color: white;
font-family: Helvetica, Arial, sans-serif;
overflow: hidden;
height: 100vh;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
input[type="file"] {
margin: 0em;
padding: 0;
}
button {
margin: 0.3em;
}
#title {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 1.3em;
font-weight: normal;
margin: 0;
}
input[type="file"]::-webkit-file-upload-button, button {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
border-radius: 0;
border: 1px solid #fff;
padding: 1em;
color: #fff;
background: black;
box-shadow: none;
cursor: pointer;
text-decoration: none;
}
input[type="file"]::-webkit-file-upload-button:hover, button:hover {
background: #fff;
color: black;
}
input[type="file"]::-webkit-file-upload-button.active, button.active {
background: #fff;
color: black;
}
input[type="file"]::-webkit-file-upload-button.active:hover, button.active:hover {
background: black;
color: #fff;
}
input[type="file"]::-webkit-file-upload-button:focus, button:focus {
outline: 0;
}
/*Downloaded from https://www.codeseek.co/pixelass/audio-analyzer-css-fractals-avVwvm */
(function(window, document, undefined) {
'use strict';
var play = document.getElementById('play');
var file = document.getElementById('file');
var audio = document.getElementById('audio');
var title = document.getElementById('title');
var ones = document.querySelectorAll('.one');
var twos = document.querySelectorAll('.two');
var threes = document.querySelectorAll('.three');
// initialize NERDDISCO
var NERDDISCO_audio = new ndAudio({
mediaElement: audio,
fftSize: 512
});
file.addEventListener('change', onFile, false);
function onFile() {
loadFileObject(this.files[0], onSoundLoaded);
}
function loadFileObject(obj, callback) {
var reader = new FileReader();
reader.onload = callback;
reader.readAsDataURL(obj);
console.log(obj)
title.innerText = obj.name;
play.innerText = "play"
}
function onSoundLoaded(e) {
NERDDISCO_audio.updateMediaElement(e.target.result);
}
function randomTo(to) {
var ret = Math.floor(Math.random() * to) + 1;
return ret;
}
function randomColor(rand, limit, frequencyData) {
return Math.min(Math.round(getAverageVolume(frequencyData) * randomTo(rand)), limit);
}
function getAverageVolume(array) {
var values = 0;
var average;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
average = values / length;
return average;
}
function animate(el, move, add) {
var frequencyData = NERDDISCO_audio.getFrequencyData();
var rotation = getAverageVolume(frequencyData) * move + add;
var h = randomColor(0, 3600, frequencyData);
var s = randomColor(5, 100, frequencyData);
var l = randomColor(30, 70, frequencyData);
var r1 = randomTo(20);
var r2 = randomTo(30);
//var r = randomColor(3, 250,frequencyData);
//var g = randomColor(3, 250,frequencyData);
//var b = randomColor(3, 250,frequencyData);
el.style.webkitTransform = 'rotate(' + rotation + 'deg) translate(' + r2 + '%,' + r1 + '%)';
el.style.backgroundColor = 'hsla(' + h * move + ',' + s + '%,' + l + '%,0.1)';
}
window.requestAnimationFrame(function _animloop() {
window.requestAnimationFrame(_animloop);
if (!audio.paused) {
NERDDISCO_audio.updateData();
Array.prototype.forEach.call(ones, function(el) {
animate(el, 5, 33)
});
Array.prototype.forEach.call(twos, function(el) {
animate(el, 10, 55)
});
Array.prototype.forEach.call(threes, function(el) {
animate(el, 20, 77)
});
}
});
play.addEventListener('click', function() {
if (!NERDDISCO_audio.mediaElement.paused) {
NERDDISCO_audio.mediaElement.pause();
play.innerText = "play"
} else {
NERDDISCO_audio.mediaElement.play();
play.innerText = "pause"
}
}, false);
})(window, document);
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
