<h2>Audio Analysis Return Values</h2>

<div id="controls">
  <section class="button">
    <label for="play-track">1) Play Music:</label>
    <button id="play-track">Play</button>
  </section>
  <section class="toggle">
    <input id="toggle-filter" type="checkbox">
    <label for="toggle-filter">
      <div class="can-toggle__label-text">2) Toggle Filter:</div>
      <div class="can-toggle__switch" data-checked="on" data-unchecked="off"></div>
    </label>
  </section>
</div>

<section class="freq-array"></section>
<audio crossOrigin="anonymous" src="http://rumyrashead.com/media/screwUp.mp3" id="music-track"></audio>
<p class="credit">Music: <a href="https://soundcloud.com/kinnoha/screw-up-prod-by-krikit-boi">Screw Up by Kinnoha</a></p>

$black: #1a1a14;
$white: #fafafa;
$red: hsla(350,60%,45%,1);
$grey: #f2f2f2;
$blue: hsla(180,60%,45%,1);
$yellow: #ead571;

body {
  background: $white;
  font-family: sans-serif; color:$black;
  font-size:100%; line-height:1.3;
  letter-spacing:0.5px; text-align:center;
}
h2 {margin:1em;}

#controls {
  width: 80%; margin:1em auto;
  padding:0.5em; box-sizing:border-box;
  background: $grey; box-shadow: 1px 1px 2px #666;
  border: 1px solid #ccc; border-radius:0.5em;
  display:flex;
  & > section {width:50%;}
}

.control-style {
  background-color:$red; border-radius:4px;
  transition: background-color 0.3s ease-in-out;
}

#play-track {
  border:none; padding:0.5em 2em; margin-left:0.5em;
  @extend .control-style;
  color:$white; font-size:1em;
}

/*toggle inspired by a pen by Chris Hart https://codepen.io/personable/pen/stpwD?editors=1100*/
.toggle {}
.toggle label {
  position:relative;
  display:flex; align-items:center;
  user-select:none;
}
.toggle label .can-toggle__switch {
  height:34px; padding-left:116px;
  position:absolute; top:0px; left:130px;
  @extend .control-style;
}
.toggle label .can-toggle__switch:before {
  content:attr(data-checked);
  position: absolute; top:0px; right:0px;
  width:32px; padding:0px 12px;
  font-size:1em; color:$white;
  line-height:34px; text-align:center;
}
.toggle label .can-toggle__switch:after {
  content:attr(data-unchecked);
  position: absolute; top:1px; left:1px;
  width:32px; padding:0px 12px;
  background: white; border-radius: 2px;
  font-size:1em; color:$red;
  line-height: 32px; text-align:center;
  transition: transform 0.3s ease-in-out;
  transform: translate3d(0, 0, 0);
  z-index:5;
}
.toggle input[type="checkbox"] {
  position:absolute; top:0px; left:0px;
  opacity:0;
}
.toggle input[type="checkbox"]:checked ~ label .can-toggle__switch {background-color:$blue;}
.toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:before {content:attr(data-unchecked); left:0px;}
.toggle input[type="checkbox"]:checked ~ label .can-toggle__switch:after {
  content: attr(data-checked);
  transform:translate3d(58px, 0, 0);
  color:$blue;
}
.toggle .can-toggle__label-text {line-height:36px;}


.freq-array{
  width:80%; margin:1em auto;
  i {
    display:inline-block;
    width:60px;
    line-height: 1.6;
  }
}
.credit {
  position:absolute; bottom:10px; right:10px;
  a {font-size:100%; color:hsla(240,65%,55%,0.7); &:hover{text-decoration:none;}}
}

// set up audio context
var audioContext = (window.AudioContext || window.webkitAudioContext);
// create audio class
if (audioContext) {
  // Web Audio API is available.
  var audioAPI = new audioContext();
} else {
  // Web Audio API is not available. Ask the user to use a supported browser.
  alert("Oh nos! It appears your browser does not support the Web Audio API, please upgrade or use a different browser");
}

const arraySec = document.querySelector('.freq-array'),
  audioEl = document.querySelector('#music-track'),
  playButton = document.querySelector('#play-track'),
  toggle = document.querySelector('#toggle-filter'),
  audioTrack = audioAPI.createMediaElementSource(audioEl);

var analyserNode = audioAPI.createAnalyser(),
    frequencyData = new Uint8Array(128),
    biQuadNodeFil = audioAPI.createBiquadFilter(),
    filterVal = 20000,
    cutOffVal = 5000;

analyserNode.fftSize = 256;
biQuadNodeFil.type = "lowpass";

function connectTrack() {
  audioTrack.connect(biQuadNodeFil);
  biQuadNodeFil.connect(analyserNode);
  audioTrack.connect(audioAPI.destination);
  analyserNode.connect(audioAPI.destination);
  audioEl.play();
  animate();
}

playButton.onclick = function() {
  if (audioEl.paused) {
    connectTrack();
    playButton.innerHTML = 'Pause';
    playButton.style.backgroundColor = 'hsla(180,60%,45%,1)';
  } else {
    audioEl.pause();
    playButton.innerHTML = 'Play';
    playButton.style.backgroundColor = 'hsla(350,60%,45%,1)';
  }
}

// constantly picking up mic data
function animate() {
  requestAnimationFrame(animate);
  if (toggle.checked === true) {
    filterVal = cutOffVal;
  } else {
    filterVal = 20000;
  }
  biQuadNodeFil.frequency.value = filterVal;
  analyserNode.getByteFrequencyData(frequencyData);
  printArray();
}

function printArray() {
  var newHTML = '';
  frequencyData.forEach(function(el) {
    newHTML += '<i style="color:hsla('+(180+(el/1.6))+',60%,45%,1)">['+el+']</i>';
  })
  arraySec.innerHTML = newHTML;
}