yportne8/audio-visualizer-ios-style.markdown

## audio-visualizer-ios-style.markdown

      
    Raw
  

              audio-visualizer-ios-style.markdown
            
          
    Audio Visualizer(IOS style)

Fullscreen
https://samosale.github.io/ios-soundcloud-graphic/
A Pen by idx on CodePen.
License.

  
## index.html

<body>
    <article class="blur">
        <div class="title">
            <span style="user-select: none; cursor: default; display: flex; width: 61px; position:absolute; left:0;">
              <a data-radium="true" style="user-select: none; -webkit-app-region: no-drag; cursor: default; box-sizing: border-box; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: 1px; margin-left: 5px; margin-right: 4px; line-height: 0; background-color: rgb(200, 0, 0); border-color: rgb(200, 0, 0);"></a>
              <a data-radium="true" style="user-select: none; -webkit-app-region: no-drag; cursor: default; box-sizing: border-box; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: 1px; margin-left: 4px; margin-right: 4px; line-height: 0; background-color: rgb(191, 145, 35); border-color: rgb(173, 125, 21);"></a>
              <a data-radium="true" style="user-select: none; -webkit-app-region: no-drag; cursor: default; box-sizing: border-box; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: 1px; margin-left: 4px; margin-right: 4px; line-height: 0; background-color: rgb(0, 100, 0); border-color: rgb(0, 100, 0);"></a>
            </span>
            <span>
                <h2>SoundCloud</h2>
            </span>
        </div>
        <div class="content">
            <input placeholder="Search..." onkeypress="getTracks(event, this.value)"/>
            <subheader>
                <span>Language:</span>
                <span>English</span>
            </subheader>
        <div class="list">
            <div class="item"><span>Thoughtfully redesigning OS X meant going deep into every</span></div>
            <div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
            <div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
            <div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
            <div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
            <div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
        </div>
            <div class="loader">
            <img src="images/loader.gif">
            </div>
<!--
            <div>
            <img src="images/soundcloud-1.svg" height="50%" width="100%">
            </div>
-->
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 1200 460" preserveAspectRatio="xMidYMin meet">

               <line x1="0" y1="100" x2="1200" y2="100" stroke-dasharray="7, 7"
                  stroke-width="1" stroke="white" shape-rendering="crisp"/>
               <line x1="0" y1="200" x2="1200" y2="200" stroke-dasharray="7, 7"
                  stroke-width="1" stroke="white" shape-rendering="crisp"/>
               <line x1="0" y1="300" x2="1200" y2="300" stroke-dasharray="7, 7"
                  stroke-width="1" stroke="white" shape-rendering="crisp"/>
               <line x1="0" y1="400" x2="1200" y2="400" stroke-dasharray="7, 7"
                  stroke-width="1" stroke="white" shape-rendering="crisp"/>

               <use xlinkHref="#viewBoxBorder"/>

               <g class="rects move">
                   <path id="moving-line" d="M0 400" stroke="white" fill="none" />
                   <path id="moving-line-two" d="M0 200" stroke="white" fill="none" />
                   <path id="moving-line-three" d="M0 200" stroke="white" fill="none" />
               </g>

               <g class="text">
                  <text x="250" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Jul
                  </text>
                  <text x="350" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Sep
                  </text>
                   <text x="450" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Oct
                  </text>
                     <text x="550" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Nov
                  </text>
                  <text x="650" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Dec
                  </text>
                  <text x="750" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Jan
                  </text>
                  <text x="850" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Feb
                  </text>
                  <text x="950" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Mar
                  </text>
                  <text x="1050" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Apr
                  </text>
                  <text x="1150" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    May
                  </text>
                  <text x="1250" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Jun
                  </text>
                  <text x="1350" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Jul
                  </text>
                  <text x="1450" y="150"
                        fontFamily="Verdana"
                        fontSize="16">
                    Avg
                  </text>
                </g>
            </svg>
        </div>
    </article>

    <audio src=""></audio>

    <div class="ver">
        <h5>Chrome >= 55 </h5>
        <h5>Made with ♥ and JavaScript</h5>
    </div>
</body>

## script.babel
// https://samosale.github.io/ios-soundcloud-graphic/

var NUMBER_OF_RECTS = 190;

SC.initialize({
  client_id: ""
});

var audioContext = new AudioContext();
var audio = document.getElementsByTagName("audio")[0];
audio.crossOrigin = "anonymous";

var source = audioContext.createMediaElementSource(audio);
var analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

var bufferLength = analyser.frequencyBinCount;
var frequencyData = new Uint8Array(bufferLength);

var svg = document.getElementsByClassName("rects")[0];
var article = document.getElementsByClassName("blur")[0];
var movingLine = document.getElementById("moving-line");
var movingLineTwo = document.getElementById("moving-line-two");
var movingLineThree = document.getElementById("moving-line-three");

let counter = 0;
for (var i = 0; i < NUMBER_OF_RECTS; i++) {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttribute("x", counter);
  rect.setAttribute("y", "400");
  rect.style.transform = "scale(0)";

  counter = counter + 9.16;
  svg.appendChild(rect);
}

var ml = document.createElementNS("http://www.w3.org/2000/svg", "path");
ml.setAttribute("d", "M0 400");
ml.setAttribute("stroke", "white");
ml.setAttribute("fill", "none");
ml.setAttribute("id", "moving-line");
var ml2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
ml2.setAttribute("d", "M0 200");
ml2.setAttribute("stroke", "white");
ml2.setAttribute("fill", "none");
ml2.setAttribute("id", "moving-line-two");
var ml3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
ml3.setAttribute("d", "M0 400");
ml3.setAttribute("stroke", "white");
ml3.setAttribute("fill", "none");
ml3.setAttribute("id", "moving-line-three");

var rects = document.getElementsByTagName("rect");
var len = rects.length;

var counterRects = 0;
var movingLineX = 0;
var movingLineStart = "M0 400";
var pointArrays = [];
var pointArrays2 = [];
var pointArrays3 = [];

function Render() {
  analyser.getByteFrequencyData(frequencyData);

  if (counterRects < NUMBER_OF_RECTS) {
    var num = 0;
    var num2 = 0;
    var num3 = 0;

    for (var i = 0; i < 1024; i++) {
      num += frequencyData[i];
    }
    movingLineX += 8.91;
    pointArrays.push(" L " + movingLineX + " " + (300 - num / 1024 * 2));

    movingLine.setAttribute(
      "d",
      movingLineStart + pointArrays.slice(-500).join()
    );

    var player = rects[counterRects].animate(
      [
        {
          transform: "scaleY(0)"
        },
        {
          transform: `scaleY(${num / 1024 * 2})`
        }
      ],
      {
        duration: 800,
        iterations: 1,
        easing: "ease-out",
        delay: 0,
        fill: "forwards"
      }
    );

    counter = counter + 8.16;
    counterRects++;
  } else if (counterRects === NUMBER_OF_RECTS) {
    svg.classList.remove("move");
    counterRects++;
  } else {
    while (svg.firstChild) {
      svg.removeChild(svg.firstChild);
    }

    svg.appendChild(ml);
    pointArrays.splice(0, pointArrays.length);

    movingLineX = 0;
    var secCounter = 0;

    for (var k = 0; k < NUMBER_OF_RECTS; k++) {
      var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

      rect.setAttribute("x", secCounter);
      rect.setAttribute("y", "400");
      rect.style.transform = "scale(0)";
      secCounter = secCounter + 9.16;
      svg.appendChild(rect);
    }

    svg.classList.add("move");
    counterRects = 0;
    movingLine = document.getElementById("moving-line");
  }

  requestAnimationFrame(Render);
}

var isPlaying = false;
var request = new XMLHttpRequest();

request.open(
  "GET",
  "https://api.soundcloud.com/tracks/289272149/stream?client_id=237d195ad90846f5e6294ade2e8cf87b",
  true
);
request.responseType = "blob";

request.onload = function() {
  audio.src = window.URL.createObjectURL(request.response);
  setTimeout(function() {
    audio.play();
    Render();
  }, 1000);
};

request.send();

function getTracks(event, query) {
  if (!query) {
    return;
  }
  if (event.keyCode === 13) {
    loadingState();
    SC.get("/tracks", {
      q: query,
      limit: 6
    }).then(function(tracks) {
      loadedState();
      clearList();
      tracks.forEach(function(track) {
        addToList(track.title, track.stream_url);
      });
    });
  }
}

function loadingState() {
  document.querySelector(".list").style.display = "none";
  document.querySelector(".loader").style.display = "block";
}

function loadedState() {
  document.querySelector(".list").style.display = "block";
  document.querySelector(".loader").style.display = "none";
}

function clearList() {
  document.querySelector(".list").innerHTML = "";
}

function addToList(content, url) {
  document.querySelector(".list").appendChild(new Item(content, url).create());
}

function Item(content, url) {
  this.listItem = document.createElement("div");
  this.listItem.classList.add("item");
  this.listItem.setAttribute("data-url", url);
  this.contentSpan = document.createElement("span");
  this.contentSpan.textContent = content;
  this.contentSpan.classList.add("truncate");
  this.listItem.appendChild(this.contentSpan);

  this.create = function() {
    return this.listItem;
  };
}

$("body").on("click", ".item", function() {
  audio.pause();
  audio.setAttribute(
    "src",
    $(this).data("url") + "?client_id=" + "237d195ad90846f5e6294ade2e8cf87b"
  );
  audio.play();
});
SC.get("/tracks", {
  q: "Dean Martin",
  limit: 6
}).then(function(tracks) {
  clearList();
  tracks.forEach(function(track) {
    addToList(track.title, track.stream_url);
  });
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>

## style.scss
*,
*:before {
    box-sizing: border-box;
    position: relative;
}

html,
body {
    margin: 0;
    padding: 0;
}

.small {
    transform: scaleY(0);
}

.content div.item {
    width: 100%;
    height: 50px;
    padding: 1em;
    color: #fff;
    cursor: pointer;
}

.content {
    background-color: rgba(0, 0, 0, 0.28);
}

.truncate {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content input {
    width: 100%;
    height: 50px;
    padding: 1.2em;
    font-size: 2.5em;
    font-weight: thin;
    outline: none;
    border: 0;
}

.pathLine {
    fill: none;
}

.content div.item:nth-child(odd) {
    padding: 1em;
    background: rgba(0, 0, 0, 0.1);
}

.content div.item:hover {
    background: #007aff;
}

.content div.list div:active {
    background: #009aff;
}

subheader {
    display: block;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    padding: .55em;
    padding-top: 1.2em;
    padding-left: 1em;
}

subheader span:first-of-type {
    opacity: .7;
}

body {
    background: url("https://samosale.github.io/ios-soundcloud-graphic/images/vivaldi-stars.jpg") 50% no-repeat fixed;
    background-size: cover;
    font: 14px/1.4 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

h2 {
    font-size: 1.4em;
    font-weight: 300;
    color: #222;
}

p:not(:last-child) {
    margin-bottom: 0.6em;
}

p.small {
    font-size: 0.8em;
    color: #222;
    text-align: center;
}

p {
    color: white;
    font-weight: thin;
}

a {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #888;
}

.blur {
    transition: filter 2.9s ease;
}

.blur:before {
    display: inline-block;
    content: '';
    position: absolute;
    top: -20%;
    left: -40%;
    right: -40%;
    bottom: -40%;
    background: inherit;
    filter: blur(75px);
}

@keyframes opacit {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

article {
    margin: 0 auto;
    width: 500px;
    position: relative;
    top: 10px;
    background: inherit;
    border-radius: 6px;
    box-shadow: -20px 16px 22px rgb(0, 0, 0);
    overflow: hidden;
    transform-origin: top;
}

article .title {
    padding: 8px;
    background: white;
    text-align: center;
    font-size: .9em;
}

article .title:hover {
    cursor: move;
}

article .content {
    padding: 0%;
}

.attr {
    position: fixed;
    right: 5px;
    bottom: 5px;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-size: 0.8em;
    font-weight: normal;
    color: white;
}

line {
    opacity: .3;
}

@keyframes offset {
    0% {
        stroke-dashOffset: 200px;
    }
    100% {
        stroke-dashOffset: 0px;
    }
}

svg {
    will-change: transform;
    width: 500px;
    overflow: hidden;
}

.text {
    fill: white;
    opacity: .7;
    transform: translateY(287px) translateX(-246px);
}

.tr {
    width: 700px;
    height: 150px;
    margin: 60px auto;
}

.simpleLines {
    shape-rendering: crispEdges;
    opacity: 0.3;
}

.paddingGroup {
    transform: translate(0, 200px);
}

.line1 {
    stroke-width: 1;
}

.opet {
    shape-rendering: crispEdges;
    stroke-width: 1;
}

circle {
    stroke: red;
    stroke-width: 1;
}

.krug4 {
    stroke: green;
    stroke-width: 1;
    fill: red;
}

svg.small {
    width: 100%;
    height: 10vm;
    max-width: 160em;
    max-height: 160em;
    min-height: 15vh;
    /*35em*/
    float: left;
}

.arc {
    stroke-width: 1;
    fill-opacity: 0;
    marker-start: url(#loop);
    marker-end: url(#loop);
    pointer-events: all;
}

.clock {
    stroke: red;
    fill: purple;
    stroke-width: 1.3;
}

.movingLine {
    stroke-width: 1;
    stroke: red;
    fill: purple;
    stroke: red;
    stroke-width: 1;
    fill: red;
}

path:hover {
    fill-opacity: 0.3;
}

.year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -186%);
    z-index: -100;
    opacity: .3;
}

rect {
    transform-box:fill-box;
    transform-origin: bottom;
    shape-rendering: optimizeQuality;
    shape-rendering: crispEdges;
    height: 1px;
    width: 7.16px;
    fill: rgba(255, 255, 255, 0.54);
    will-change: transform;
}

.crisp {
    shape-rendering: crispEdges;
    opacity: .1;
    stroke-dasharray: 1, 2;
}

.animation {
    animation: scale123 .8s ease-out;
    animation-fill-mode: forwards;
}

@keyframes scale123 {
    0% {
        transform: scale3d(1, 0, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
        animation-timing-function: ease-out;
    }
}

@keyframes translate {
    0% {
        transform: translate3d(0px, 0, 0);
    }
    100% {
        transform: translate3d(-1080px, 0, 0);
    }
}

.move {
    animation: translate 10.5s linear;
    animation-fill-mode: forwards;
}

.hiphop {
    animation: hiphop 400ms ease-out;
    transition: all 400ms ease-out;
    animation-fill-mode: forwards;
}

@keyframes hiphop {
    0% {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(0, 0, 0);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes heartRate {
    0.00% {
        transform: translate3d(10.2px, 0, 0) scale(0.898);
    }
    10.77% {
        transform: translate3d(-22.52px, 0, 0) scale(1.2252);
    }
    40.51% {
        transform: translate3d(2.58px, 0, 0) scale(0.9742);
    }
    70.26% {
        transform: translate3d(-0.29px, 0, 0) scale(1.0029);
    }
    100.00% {
        transform: translate3d(0.03px, 0, 0) scale(0.9997);
    }
}

.btn1 {
    cursor: pointer;
    padding: 3px 10px 3px 10px;
    border: 1px solid rgba(0, 95, 143, 0.387);
    border-radius: 5px;
    background: #1F375F;
    color: #fff;
    margin: 10px;
}

.addContent {
    animation: add 1s ease;
    background: #795548;
    transform-origin: right bottom;
}

@keyframes add {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

h1 {
    color: rgba(27, 120, 162, 0.1);
}

.pathLine {
    animation: dashoffset 5.2s linear;
    animation-fill-mode: forwards;
}

@keyframes dashoffset {
    0% {
        stroke-dashoffset: 2604.7px;
    }
    100% {
        stroke-dashoffset: 0px;
    }
}

.list {
    margin: 0;
    padding: 0;
    height: 310px;
}

.loader {
    margin: 0;
    padding: 0;
    height: 310px;
    text-align: center;
    display: none;
}

.loader img {}

.list div img {
    height: 32px;
    width: 32px;
}

#moving-line {
    stroke-width: 1px;
    stroke-dashArray: 10 10;
}

#moving-line-two {
    stroke-dashArray: 1 1;
}

#moving-line-three {}

.ver {
    position: fixed;
    right: 5%;
    bottom: 5px;
    text-align: center;
    transform: translateX(50%);
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-size: .8em;
    font-weight: normal;
    color: white;
}

	<body>
	<article class="blur">
	<div class="title">
	<span style="user-select: none; cursor: default; display: flex; width: 61px; position:absolute; left:0;">
	<a data-radium="true" style="user-select: none; -webkit-app-region: no-drag; cursor: default; box-sizing: border-box; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: 1px; margin-left: 5px; margin-right: 4px; line-height: 0; background-color: rgb(200, 0, 0); border-color: rgb(200, 0, 0);"></a>
	<a data-radium="true" style="user-select: none; -webkit-app-region: no-drag; cursor: default; box-sizing: border-box; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: 1px; margin-left: 4px; margin-right: 4px; line-height: 0; background-color: rgb(191, 145, 35); border-color: rgb(173, 125, 21);"></a>
	<a data-radium="true" style="user-select: none; -webkit-app-region: no-drag; cursor: default; box-sizing: border-box; width: 12px; height: 12px; border-width: 1px; border-style: solid; border-radius: 50%; margin-top: 1px; margin-left: 4px; margin-right: 4px; line-height: 0; background-color: rgb(0, 100, 0); border-color: rgb(0, 100, 0);"></a>
	</span>
	<span>
	<h2>SoundCloud</h2>
	</span>
	</div>
	<div class="content">
	<input placeholder="Search..." onkeypress="getTracks(event, this.value)"/>
	<subheader>
	<span>Language:</span>
	<span>English</span>
	</subheader>
	<div class="list">
	<div class="item"><span>Thoughtfully redesigning OS X meant going deep into every</span></div>
	<div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
	<div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
	<div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
	<div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
	<div class="item">Thoughtfully redesigning OS X meant going deep into every</div>
	</div>
	<div class="loader">
	<img src="images/loader.gif">
	</div>
	<!--
	<div>
	<img src="images/soundcloud-1.svg" height="50%" width="100%">
	</div>
	-->
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 1200 460" preserveAspectRatio="xMidYMin meet">

	<line x1="0" y1="100" x2="1200" y2="100" stroke-dasharray="7, 7"
	stroke-width="1" stroke="white" shape-rendering="crisp"/>
	<line x1="0" y1="200" x2="1200" y2="200" stroke-dasharray="7, 7"
	stroke-width="1" stroke="white" shape-rendering="crisp"/>
	<line x1="0" y1="300" x2="1200" y2="300" stroke-dasharray="7, 7"
	stroke-width="1" stroke="white" shape-rendering="crisp"/>
	<line x1="0" y1="400" x2="1200" y2="400" stroke-dasharray="7, 7"
	stroke-width="1" stroke="white" shape-rendering="crisp"/>

	<use xlinkHref="#viewBoxBorder"/>

	<g class="rects move">
	<path id="moving-line" d="M0 400" stroke="white" fill="none" />
	<path id="moving-line-two" d="M0 200" stroke="white" fill="none" />
	<path id="moving-line-three" d="M0 200" stroke="white" fill="none" />
	</g>

	<g class="text">
	<text x="250" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Jul
	</text>
	<text x="350" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Sep
	</text>
	<text x="450" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Oct
	</text>
	<text x="550" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Nov
	</text>
	<text x="650" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Dec
	</text>
	<text x="750" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Jan
	</text>
	<text x="850" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Feb
	</text>
	<text x="950" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Mar
	</text>
	<text x="1050" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Apr
	</text>
	<text x="1150" y="150"
	fontFamily="Verdana"
	fontSize="16">
	May
	</text>
	<text x="1250" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Jun
	</text>
	<text x="1350" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Jul
	</text>
	<text x="1450" y="150"
	fontFamily="Verdana"
	fontSize="16">
	Avg
	</text>
	</g>
	</svg>
	</div>
	</article>

	<audio src=""></audio>

	<div class="ver">
	<h5>Chrome >= 55 </h5>
	<h5>Made with ♥ and JavaScript</h5>
	</div>
	</body>
	// https://samosale.github.io/ios-soundcloud-graphic/

	var NUMBER_OF_RECTS = 190;

	SC.initialize({
	client_id: ""
	});

	var audioContext = new AudioContext();
	var audio = document.getElementsByTagName("audio")[0];
	audio.crossOrigin = "anonymous";

	var source = audioContext.createMediaElementSource(audio);
	var analyser = audioContext.createAnalyser();

	source.connect(analyser);
	analyser.connect(audioContext.destination);

	var bufferLength = analyser.frequencyBinCount;
	var frequencyData = new Uint8Array(bufferLength);

	var svg = document.getElementsByClassName("rects")[0];
	var article = document.getElementsByClassName("blur")[0];
	var movingLine = document.getElementById("moving-line");
	var movingLineTwo = document.getElementById("moving-line-two");
	var movingLineThree = document.getElementById("moving-line-three");

	let counter = 0;
	for (var i = 0; i < NUMBER_OF_RECTS; i++) {
	var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
	rect.setAttribute("x", counter);
	rect.setAttribute("y", "400");
	rect.style.transform = "scale(0)";

	counter = counter + 9.16;
	svg.appendChild(rect);
	}

	var ml = document.createElementNS("http://www.w3.org/2000/svg", "path");
	ml.setAttribute("d", "M0 400");
	ml.setAttribute("stroke", "white");
	ml.setAttribute("fill", "none");
	ml.setAttribute("id", "moving-line");
	var ml2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
	ml2.setAttribute("d", "M0 200");
	ml2.setAttribute("stroke", "white");
	ml2.setAttribute("fill", "none");
	ml2.setAttribute("id", "moving-line-two");
	var ml3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
	ml3.setAttribute("d", "M0 400");
	ml3.setAttribute("stroke", "white");
	ml3.setAttribute("fill", "none");
	ml3.setAttribute("id", "moving-line-three");

	var rects = document.getElementsByTagName("rect");
	var len = rects.length;

	var counterRects = 0;
	var movingLineX = 0;
	var movingLineStart = "M0 400";
	var pointArrays = [];
	var pointArrays2 = [];
	var pointArrays3 = [];

	function Render() {
	analyser.getByteFrequencyData(frequencyData);

	if (counterRects < NUMBER_OF_RECTS) {
	var num = 0;
	var num2 = 0;
	var num3 = 0;

	for (var i = 0; i < 1024; i++) {
	num += frequencyData[i];
	}
	movingLineX += 8.91;
	pointArrays.push(" L " + movingLineX + " " + (300 - num / 1024 * 2));

	movingLine.setAttribute(
	"d",
	movingLineStart + pointArrays.slice(-500).join()
	);

	var player = rects[counterRects].animate(
	[
	{
	transform: "scaleY(0)"
	},
	{
	transform: `scaleY(${num / 1024 * 2})`
	}
	],
	{
	duration: 800,
	iterations: 1,
	easing: "ease-out",
	delay: 0,
	fill: "forwards"
	}
	);

	counter = counter + 8.16;
	counterRects++;
	} else if (counterRects === NUMBER_OF_RECTS) {
	svg.classList.remove("move");
	counterRects++;
	} else {
	while (svg.firstChild) {
	svg.removeChild(svg.firstChild);
	}

	svg.appendChild(ml);
	pointArrays.splice(0, pointArrays.length);

	movingLineX = 0;
	var secCounter = 0;

	for (var k = 0; k < NUMBER_OF_RECTS; k++) {
	var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

	rect.setAttribute("x", secCounter);
	rect.setAttribute("y", "400");
	rect.style.transform = "scale(0)";
	secCounter = secCounter + 9.16;
	svg.appendChild(rect);
	}

	svg.classList.add("move");
	counterRects = 0;
	movingLine = document.getElementById("moving-line");
	}

	requestAnimationFrame(Render);
	}

	var isPlaying = false;
	var request = new XMLHttpRequest();

	request.open(
	"GET",
	"https://api.soundcloud.com/tracks/289272149/stream?client_id=237d195ad90846f5e6294ade2e8cf87b",
	true
	);
	request.responseType = "blob";

	request.onload = function() {
	audio.src = window.URL.createObjectURL(request.response);
	setTimeout(function() {
	audio.play();
	Render();
	}, 1000);
	};

	request.send();

	function getTracks(event, query) {
	if (!query) {
	return;
	}
	if (event.keyCode === 13) {
	loadingState();
	SC.get("/tracks", {
	q: query,
	limit: 6
	}).then(function(tracks) {
	loadedState();
	clearList();
	tracks.forEach(function(track) {
	addToList(track.title, track.stream_url);
	});
	});
	}
	}

	function loadingState() {
	document.querySelector(".list").style.display = "none";
	document.querySelector(".loader").style.display = "block";
	}

	function loadedState() {
	document.querySelector(".list").style.display = "block";
	document.querySelector(".loader").style.display = "none";
	}

	function clearList() {
	document.querySelector(".list").innerHTML = "";
	}

	function addToList(content, url) {
	document.querySelector(".list").appendChild(new Item(content, url).create());
	}

	function Item(content, url) {
	this.listItem = document.createElement("div");
	this.listItem.classList.add("item");
	this.listItem.setAttribute("data-url", url);
	this.contentSpan = document.createElement("span");
	this.contentSpan.textContent = content;
	this.contentSpan.classList.add("truncate");
	this.listItem.appendChild(this.contentSpan);

	this.create = function() {
	return this.listItem;
	};
	}

	$("body").on("click", ".item", function() {
	audio.pause();
	audio.setAttribute(
	"src",
	$(this).data("url") + "?client_id=" + "237d195ad90846f5e6294ade2e8cf87b"
	);
	audio.play();
	});
	SC.get("/tracks", {
	q: "Dean Martin",
	limit: 6
	}).then(function(tracks) {
	clearList();
	tracks.forEach(function(track) {
	addToList(track.title, track.stream_url);
	});
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
	*,
	*:before {
	box-sizing: border-box;
	position: relative;
	}

	html,
	body {
	margin: 0;
	padding: 0;
	}

	.small {
	transform: scaleY(0);
	}

	.content div.item {
	width: 100%;
	height: 50px;
	padding: 1em;
	color: #fff;
	cursor: pointer;
	}

	.content {
	background-color: rgba(0, 0, 0, 0.28);
	}

	.truncate {
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.content input {
	width: 100%;
	height: 50px;
	padding: 1.2em;
	font-size: 2.5em;
	font-weight: thin;
	outline: none;
	border: 0;
	}

	.pathLine {
	fill: none;
	}

	.content div.item:nth-child(odd) {
	padding: 1em;
	background: rgba(0, 0, 0, 0.1);
	}

	.content div.item:hover {
	background: #007aff;
	}

	.content div.list div:active {
	background: #009aff;
	}

	subheader {
	display: block;
	background: rgba(255, 255, 255, 0.8);
	width: 100%;
	padding: .55em;
	padding-top: 1.2em;
	padding-left: 1em;
	}

	subheader span:first-of-type {
	opacity: .7;
	}

	body {
	background: url("https://samosale.github.io/ios-soundcloud-graphic/images/vivaldi-stars.jpg") 50% no-repeat fixed;
	background-size: cover;
	font: 14px/1.4 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	}

	h2 {
	font-size: 1.4em;
	font-weight: 300;
	color: #222;
	}

	p:not(:last-child) {
	margin-bottom: 0.6em;
	}

	p.small {
	font-size: 0.8em;
	color: #222;
	text-align: center;
	}

	p {
	color: white;
	font-weight: thin;
	}

	a {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid #888;
	}

	.blur {
	transition: filter 2.9s ease;
	}

	.blur:before {
	display: inline-block;
	content: '';
	position: absolute;
	top: -20%;
	left: -40%;
	right: -40%;
	bottom: -40%;
	background: inherit;
	filter: blur(75px);
	}

	@keyframes opacit {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	article {
	margin: 0 auto;
	width: 500px;
	position: relative;
	top: 10px;
	background: inherit;
	border-radius: 6px;
	box-shadow: -20px 16px 22px rgb(0, 0, 0);
	overflow: hidden;
	transform-origin: top;
	}

	article .title {
	padding: 8px;
	background: white;
	text-align: center;
	font-size: .9em;
	}

	article .title:hover {
	cursor: move;
	}

	article .content {
	padding: 0%;
	}

	.attr {
	position: fixed;
	right: 5px;
	bottom: 5px;
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	color: white;
	}

	line {
	opacity: .3;
	}

	@keyframes offset {
	0% {
	stroke-dashOffset: 200px;
	}
	100% {
	stroke-dashOffset: 0px;
	}
	}

	svg {
	will-change: transform;
	width: 500px;
	overflow: hidden;
	}

	.text {
	fill: white;
	opacity: .7;
	transform: translateY(287px) translateX(-246px);
	}

	.tr {
	width: 700px;
	height: 150px;
	margin: 60px auto;
	}

	.simpleLines {
	shape-rendering: crispEdges;
	opacity: 0.3;
	}

	.paddingGroup {
	transform: translate(0, 200px);
	}

	.line1 {
	stroke-width: 1;
	}

	.opet {
	shape-rendering: crispEdges;
	stroke-width: 1;
	}

	circle {
	stroke: red;
	stroke-width: 1;
	}

	.krug4 {
	stroke: green;
	stroke-width: 1;
	fill: red;
	}

	svg.small {
	width: 100%;
	height: 10vm;
	max-width: 160em;
	max-height: 160em;
	min-height: 15vh;
	/35em/
	float: left;
	}

	.arc {
	stroke-width: 1;
	fill-opacity: 0;
	marker-start: url(#loop);
	marker-end: url(#loop);
	pointer-events: all;
	}

	.clock {
	stroke: red;
	fill: purple;
	stroke-width: 1.3;
	}

	.movingLine {
	stroke-width: 1;
	stroke: red;
	fill: purple;
	stroke: red;
	stroke-width: 1;
	fill: red;
	}

	path:hover {
	fill-opacity: 0.3;
	}

	.year {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -186%);
	z-index: -100;
	opacity: .3;
	}

	rect {
	transform-box:fill-box;
	transform-origin: bottom;
	shape-rendering: optimizeQuality;
	shape-rendering: crispEdges;
	height: 1px;
	width: 7.16px;
	fill: rgba(255, 255, 255, 0.54);
	will-change: transform;
	}

	.crisp {
	shape-rendering: crispEdges;
	opacity: .1;
	stroke-dasharray: 1, 2;
	}

	.animation {
	animation: scale123 .8s ease-out;
	animation-fill-mode: forwards;
	}

	@keyframes scale123 {
	0% {
	transform: scale3d(1, 0, 1);
	}
	100% {
	transform: scale3d(1, 1, 1);
	animation-timing-function: ease-out;
	}
	}

	@keyframes translate {
	0% {
	transform: translate3d(0px, 0, 0);
	}
	100% {
	transform: translate3d(-1080px, 0, 0);
	}
	}

	.move {
	animation: translate 10.5s linear;
	animation-fill-mode: forwards;
	}

	.hiphop {
	animation: hiphop 400ms ease-out;
	transition: all 400ms ease-out;
	animation-fill-mode: forwards;
	}

	@keyframes hiphop {
	0% {
	transform: scale3d(1, 1, 1);
	}
	50% {
	transform: scale3d(0, 0, 0);
	}
	100% {
	transform: scale3d(1, 1, 1);
	}
	}

	@keyframes heartRate {
	0.00% {
	transform: translate3d(10.2px, 0, 0) scale(0.898);
	}
	10.77% {
	transform: translate3d(-22.52px, 0, 0) scale(1.2252);
	}
	40.51% {
	transform: translate3d(2.58px, 0, 0) scale(0.9742);
	}
	70.26% {
	transform: translate3d(-0.29px, 0, 0) scale(1.0029);
	}
	100.00% {
	transform: translate3d(0.03px, 0, 0) scale(0.9997);
	}
	}

	.btn1 {
	cursor: pointer;
	padding: 3px 10px 3px 10px;
	border: 1px solid rgba(0, 95, 143, 0.387);
	border-radius: 5px;
	background: #1F375F;
	color: #fff;
	margin: 10px;
	}

	.addContent {
	animation: add 1s ease;
	background: #795548;
	transform-origin: right bottom;
	}

	@keyframes add {
	0% {
	opacity: 0;
	transform: scale(0);
	}
	100% {
	opacity: 1;
	transform: scale(1);
	}
	}

	h1 {
	color: rgba(27, 120, 162, 0.1);
	}

	.pathLine {
	animation: dashoffset 5.2s linear;
	animation-fill-mode: forwards;
	}

	@keyframes dashoffset {
	0% {
	stroke-dashoffset: 2604.7px;
	}
	100% {
	stroke-dashoffset: 0px;
	}
	}

	.list {
	margin: 0;
	padding: 0;
	height: 310px;
	}

	.loader {
	margin: 0;
	padding: 0;
	height: 310px;
	text-align: center;
	display: none;
	}

	.loader img {}

	.list div img {
	height: 32px;
	width: 32px;
	}

	#moving-line {
	stroke-width: 1px;
	stroke-dashArray: 10 10;
	}

	#moving-line-two {
	stroke-dashArray: 1 1;
	}

	#moving-line-three {}

	.ver {
	position: fixed;
	right: 5%;
	bottom: 5px;
	text-align: center;
	transform: translateX(50%);
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-size: .8em;
	font-weight: normal;
	color: white;
	}