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

RSS feed with jQuery

RSS feed with jQuery

By Turqueso
manes winchester

manes winchester

By Sergey1
River flow with canvas and requestAnimationFrame

River flow with canvas and requestAnimationFrame

By dandv
A Pen by Josh Holladay

A Pen by Josh Holladay

By jahmsc
A Pen by Rima

A Pen by Rima

By rimaghawa
Backbone Event Handler

Backbone Event Handler

By jagretz
Responsive Navigation Demo w/ Kube

Responsive Navigation Demo w/ Kube

By Mango_Design
Jerry Garcia

Jerry Garcia

By Peachs
© 2018 - Copyright CodeSeek.co
contact email