html
  body
    #container.card
      .progress
        #songIdForPorgessBar.progress__bar
      .cover
        img#artwork(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/122478/12-Creative-Poster-Design-Tutorials-Using-Illustrator.jpg', width='260', height='260', alt='')
      .waves
        .baseline
        .piano
        .riffs
        .kicks
      .disc-placeholder
        button#play.play-button
          i.fa.fa-play
      .info
        p#band.info__band Daft Punk 
        p#track.info__track Get Lucky (Vanderway Edit)

/* This is an experiment, everything is set manually on purpose ^^U */

// Music matching variables
$ms: 60000ms;
$bpm: 116;

// Notes length
$quarter: $ms/$bpm;
$eighth: $quarter / 2;
$sixtheenth: $quarter / 4;
$half: $quarter * 2;
$whole: $quarter * 4;
$double: $whole * 2;
$long: $whole * 4;

// Phrase length
$phrase: 16;

// Cue points
$cue-riff-1: ($whole+$quarter/8)*8;
$cue-riff-2: $whole * 36;
$cue-riff-3: $whole * 52;
$cue-riff-4: $whole * 76;
$cue-kick-1: $whole * 16;
$cue-kick-2: $whole * 44;
$cue-kick-3: $whole * 92;

// Loop timing
$loop-riff-1: $phrase*2;
$loop-riff-2: $phrase;
$loop-riff-3: $phrase;
$loop-riff-4: ($phrase - 1) * 4;
$loop-kick: $phrase * 4;
$loop-piano: $phrase * 8;
$loop-cover: $phrase * 8;

// UI variables
$circle-size: 260px;
$offset-position: 30px;
$bkg: #292735;
$card: #383749;

body {
  background: $bkg;
  color: white;
  font-family: Roboto, sans-serif;
  font-weight: 300;
}
.card {
  position: relative;
  margin: 5vh auto;
  width: 320px;
  height: 420px;
  border-bottom: 3px solid rgba( 0, 0, 0, 0.3);
  border-radius: 6px;
  background: $card;
  overflow: hidden;
}
.disc-placeholder {
  float: left;
  position: relative;
  width: 320px;
  height: 320px;
}
.play-button {
  & {  
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 64px;
    height: 64px;
    background: gold;
    border-radius: 50%;
    border: 0;
    outline: 0;
    cursor: pointer;
    color: white;
    font-size: 24px;
    text-align: center;
    transition: all .5s ease-in-out;
  }
  &:hover {
    background: magenta;
  }
  .playing & {
    background: $bkg;
    color: #383749;
  }
}
.info {
  & {
    position: relative;
    padding: 0 20px;
    font-weight: 300;
    float: left;
    width: 280px;
    z-index: 20;
  }
  &__band {
    font-weight: bold;
  }
}

.progress {
  & {
    position: absolute;
    width: 320px;
    height: 420px;
    top: 0;
    left: 0;
    z-index: 0;
  }
  &__bar {
    background-color: darken($bkg,2);
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 420px;
    transition: width .95s linear;
  }
}

@mixin circle($color) {
  width: $circle-size;
  height: $circle-size;
  border-radius: 50%;
  position: absolute;
  top: $offset-position;
  left: $offset-position;
  opacity: 0;
  background: $color;
}

.baseline {
  @include circle(magenta);
  .playing & {
    animation: bounce $long linear $phrase*2;
  }  
}

.riffs {
  @include circle(cyan);
  .playing & {
    animation: bounce $half linear $loop-riff-1 $cue-riff-1,
                bounce $half linear $loop-riff-2 $cue-riff-2,
                bounce $half linear $loop-riff-3 $cue-riff-3,
                bounce $half linear $loop-riff-4 $cue-riff-4;
  }  
}

.kicks {
  @include circle(yellow);
  .playing & {
    animation: bounce $quarter linear $loop-kick $cue-kick-1,
                bounce $quarter linear $loop-kick $cue-kick-2,
                bounce $quarter linear $loop-kick $cue-kick-3;  
  }  
}

.piano {
  @include circle(transparent);
  border: 2px solid #fff;
  .playing & {
    animation: bounce $whole linear $loop-piano,
                color-rhythm $long linear infinite;  
  }  
}

.cover {
  & {
    @include circle(transparent);
    overflow: hidden;
    opacity: .5;
    transition: all .5s ease-in-out;
  }
  img {
    width: 100%;
    height: auto;
  }
  .playing & {
    opacity: 1;
    animation: around-the-world $long linear $loop-cover;
  }  
}

// Keyframes
@keyframes bounce {
  0% {
    transform: scale(.2);
    opacity: 0;
  }
  20% {
    opacity: .33;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes color-rhythm {
  0% {
    border-color: cyan;
  }
  25% {
    border-color: magenta;
  }
  50% {
    border-color: yellow;
  }
  100% {
    border-color: lime;
  }
}

@keyframes around-the-world {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*
var clientId = '933bc67dd9ff18eab500e8992a6b6a5f', 
    web = $('#container');

$(document).ready(function() {
  myTrack= "https://api.soundcloud.com/tracks/196459136";
  audioPlayer = new Audio(myTrack + '/stream?client_id=' + clientId);
});

$('#play').on('click', function() {
    audioPlayer.play();
    $(audioPlayer).bind('timeupdate', updateTime);
    web.addClass( "playing" );
});

var updateTime = function () { 
    var thisPlayer = $(this);
    var widthOfProgressBar = Math.floor((100 / this.duration) * this.currentTime);
    $('#songIdForPorgessBar').css({
        'width': widthOfProgressBar + '%'
    });
}
*/