audio analyzer - CSS Fractals

In this example below you will see how to do a audio analyzer - CSS Fractals with some HTML / CSS and Javascript

Generating fractals with web Audio and CSS Using: NERDDISCO by @TimPietrusky

Thumbnail
This awesome code was written by ⁣, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
  • CSS
  • JavaScript
<!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);

Comments

More from ⁣

pure CSS DNA

pure CSS DNA

By pixelass
Live editing text on a canvas

Live editing text on a canvas

By pixelass
3d eye |&#xA0;pure CSS

3d eye | pure CSS

By pixelass
element queries concept

element queries concept

By ⁣

You Might Also Like

Twitch.TV

Twitch.TV

By thatjeannie
A Pen by David Pait

A Pen by David Pait

By davidpait
Recente com Masonry - compacta

Recente com Masonry - compacta

By aguadecoco
CSS 3D transition experiment

CSS 3D transition experiment

By blazeeboy
India landing page animation

India landing page animation

By team/digitalocean
ARIA Menu Toggle Prototype

ARIA Menu Toggle Prototype

By cjcheshire
Wooden Mega Menu Navigation

Wooden Mega Menu Navigation

By JFarrow
Pomodoro Timer

Pomodoro Timer

By IzunaGaiden
© 2018 - Copyright CodeSeek.co
contact email