Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <div class="player">
    <div class="player__top-bar">
      <img src="https://developers.soundcloud.com/assets/logo_black-8c4cb46bf63fda8936f9a4d967416dc6.png" alt="Soundcloud">
      <a class="player__about" href="#" data-target-modal="about"></a>
    </div>
    <div class="player__hero-wrap">
      <div class="player__hero-aspect"></div>
    </div>
    <div class="player__duration">
      <div class="player__timeline">
        <div class="player__timeline-inner"></div>
      </div>
      <span class="player__time player__time--current">0:00</span>
      <span class="player__time player__time--total">0:00</span>
    </div>
    <div class="player__content">
      <div class="player__main">
        <button class="control control--previous"></button>
        <button class="control control--primary control--play"></button>
        <button class="control control--next"></button>
        <div class="player__meta">
          <h3 class="player__info player__info--track"></h3>
          <h4 class="player__info player__info--artist"></h4>
        </div>
      </div>
      <div class="player__sub-controls">
        <button class="control control--loop"></button>
        <div class="volume">
          <button class="control control--volume"></button>
          <div class="volume__slider">
            <div class="volume__track">
              <div class="volume__track-level"></div>
              <div class="volume__thumb"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="overlay">
    <button class="overlay__close"></button>
    <section class="modal" data-modal="about">
      <p>Original design by <a href="https://dribbble.com/shots/2133799-Is-This-Love-Music-Player">Amit Keren</a> and idea by <a href="https://www.reddit.com/r/DevWars/comments/3ch8uw/devwars_weekly_update_07_jul_2015/">DevWars</a>. The player utilizes Soundcloud's API and credits for creating the sound tracks go to their individual uploaders.</p>
      <p>Your current playlist position and volume levels are saved between sessions. Also, the following shortkeys can be used with a keyboard.</p>
      <svg xmlns="http://www.w3.org/2000/svg" class="block center" width="457" height="90" viewBox="0 0 457 90"><path fill="none" stroke="#3B3644" stroke-miterlimit="10" d="M408.5 34.65c0 3.783-3.067 6.85-6.85 6.85h-27.3c-3.783 0-6.85-3.067-6.85-6.85V7.35c0-3.783 3.066-6.85 6.85-6.85h27.3c3.782 0 6.85 3.067 6.85 6.85v27.3z"/><path fill="#3B3644" d="M388.1 14.5l-5.065 3H378.1v7h4.935l5.065 3"/><g fill="none" stroke="#3B3644" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10"><path d="M394.338 17.564v7.124M390.775 21.126h7.125"/></g><path fill="none" stroke="#3B3644" stroke-miterlimit="10" d="M408.5 82.65c0 3.783-3.067 6.85-6.85 6.85h-27.3c-3.783 0-6.85-3.067-6.85-6.85v-27.3c0-3.783 3.066-6.85 6.85-6.85h27.3c3.782 0 6.85 3.067 6.85 6.85v27.3z"/><path fill="#3B3644" d="M388.1 62.5l-5.065 3H378.1v7h4.935l5.065 3"/><path fill="none" stroke="#3B3644" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" d="M390.775 69.126h7.125"/><g><path fill="none" stroke="#3B3644" stroke-miterlimit="10" d="M456.5 82.65c0 3.783-3.067 6.85-6.85 6.85h-27.3c-3.783 0-6.85-3.067-6.85-6.85v-27.3c0-3.783 3.066-6.85 6.85-6.85h27.3c3.782 0 6.85 3.067 6.85 6.85v27.3z"/><path fill="#3B3644" d="M439.604 66.75L435 64.5v2.866l-.92-.616L430 64.5v9l3.984-2.25 1.016-.654V73.5l4.508-2.25L443.69 69"/></g><g><path fill="none" stroke="#3B3644" stroke-miterlimit="10" d="M360.5 82.65c0 3.783-3.067 6.85-6.85 6.85h-27.3c-3.783 0-6.85-3.067-6.85-6.85v-27.3c0-3.783 3.066-6.85 6.85-6.85h27.3c3.782 0 6.85 3.067 6.85 6.85v27.3z"/><path fill="#3B3644" d="M336.455 71.25L341 73.5v-2.866l.92.616L346 73.5v-9l-3.984 2.25-1.016.654V64.5l-4.45 2.25-4.183 2.25"/></g><g><path fill="#3B3644" d="M132 69.5v-10c0-.55.418-.782.9-.516l7.31 4.033c.48.266 1.273.705 1.75.976l7.117 4.017c.48.27.48.71 0 .98l-7.205 4.023c-.48.27-1.266.707-1.746.976l-7.23 4.023c-.48.268-.896.037-.896-.513v-8z"/><path fill="none" stroke="#3B3644" stroke-miterlimit="10" d="M274.5 82.65c0 3.783-3.067 6.85-6.852 6.85H7.352C3.568 89.5.5 86.433.5 82.65v-27.3c0-3.783 3.067-6.85 6.852-6.85H267.65c3.783 0 6.85 3.067 6.85 6.85v27.3z"/></g></svg>
    </section>
  </div>
              
            
!

CSS

              
                $blue-light: #B9BFCC;
$blue-dark: #3B3644;
$pink: #FF2D79;
$white: #fff;
$black: #000;

$color-primary: $blue-dark;
$color-primary-weak: $blue-light;
$color-accent: $pink;
$color-shadow: $black;
$color-background: $white;
$color-text: $color-primary;
$color-text-weak: scale-color($color-text, $saturation: -50%, $lightness: 50%);

$document-padding: 15px;

$player-width: 680px;
$player-width-min: 280px;
$player-hero-height: 315px;
$player-border-radius: 15px;

$volume-slider-height: 120px;
$volume-track-width: 2px;
$volume-thumb-size: 10px;

@mixin bp($size, $direction: 'horizontal') {

  $breakpoints: (
    medium: 460px
  );

  @each $name, $bp in $breakpoints {
    @if ($size == $name) {
      @if ($direction == 'horizontal') {
        @media (min-width: $bp) { @content; }
      } @else if ($direction == 'vertical') {
        @media (min-height: $bp) { @content; }
      }
    }
  }
}

%clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.block {
  display: block;
}

.center {
  margin: auto;
  text-align: center;
}

*, 
*::before, 
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  background: darken($color-background, 10%);
  background: radial-gradient(ellipse at center top, darken($color-background, 4%), darken($color-background, 15%));
  color: $color-text;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.3; 
}

a {
  color: $color-accent;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

img,
svg {
  max-width: 100%;
  vertical-align: middle;
}

::selection {
  background-color: $color-accent;
  color: $color-background;
}

html, body {
  width: 100%;
  height: 100%; 
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: $player-width-min + ($document-padding * 2);
  padding: $document-padding;
  margin: 0;
}

.player {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: $player-width;
  max-height: 100%;
  background: $color-background;
  border-radius: $player-border-radius;

  &::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 8px;
    bottom: 5px;
    left: 8px;
    z-index: -1;
    box-shadow: 0 5px 34px rgba($color-shadow, 0.45);
    border-radius: 40px;
  }

  &.is-dragging {
    user-select: none;
  }

  &:not(.is-focusable) :focus {
    outline: 0;
  }

  .is-overlayed & {
    filter: blur(5px);
  }
}

.player__top-bar {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 5px 5px 10px;
  z-index: 2;
  background: rgba($color-background, 0.5);
  border-radius: 0 $player-border-radius 0 $player-border-radius;

  @include bp(medium, vertical) {
    position: fixed;
    padding: 10px;
    background: transparent;
  }
}

.player__about {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  vertical-align: middle;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMCAzMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzNCMzY0NCIgZD0iTTE1IDBDNi43MiAwIDAgNi43MiAwIDE1YzAgOC4yOCA2LjcyIDE1IDE1IDE1IDguMjggMCAxNS02LjcyIDE1LTE1QzMwIDYuNzIgMjMuMjggMCAxNSAwek0xNC43NyAyMy43NWgtMC4wOGMtMS4yMi0wLjA0LTIuMDgtMC45NC0yLjA1LTIuMTQgMC4wNC0xLjE4IDAuOTItMi4wNSAyLjEtMi4wNWwwLjA3IDBjMS4yNSAwLjA0IDIuMTEgMC45MyAyLjA3IDIuMTdDMTYuODQgMjIuOTIgMTUuOTggMjMuNzUgMTQuNzcgMjMuNzV6TTE5LjkxIDEzLjU0Yy0wLjI5IDAuNDEtMC45MiAwLjkyLTEuNzEgMS41NGwtMC44OCAwLjZjLTAuNDggMC4zOC0wLjc3IDAuNzMtMC44OCAxLjA4IC0wLjA5IDAuMjctMC4xMyAwLjM1LTAuMTQgMC45VjE3LjhoLTMuMzVsMC4wMS0wLjI4YzAuMDQtMS4xNiAwLjA3LTEuODUgMC41NS0yLjQyIDAuNzYtMC44OSAyLjQzLTEuOTcgMi41LTIuMDEgMC4yNC0wLjE4IDAuNDQtMC4zOCAwLjU5LTAuNiAwLjM1LTAuNDkgMC41MS0wLjg3IDAuNTEtMS4yNCAwLTAuNTItMC4xNS0xLTAuNDYtMS40MyAtMC4yOS0wLjQyLTAuODUtMC42Mi0xLjY2LTAuNjIgLTAuOCAwLTEuMzUgMC4yNS0xLjY3IDAuNzcgLTAuMzQgMC41My0wLjUxIDEuMS0wLjUxIDEuNjd2MC4xNEg5LjM1bDAuMDEtMC4xNWMwLjA5LTIuMTEgMC44NS0zLjY0IDIuMjQtNC41MyAwLjg4LTAuNTYgMS45OC0wLjg1IDMuMjUtMC44NSAxLjY3IDAgMy4wOCAwLjQxIDQuMTkgMS4yMSAxLjEzIDAuODEgMS43IDIuMDMgMS43IDMuNjFDMjAuNzQgMTEuOTUgMjAuNDYgMTIuNzkgMTkuOTEgMTMuNTR6Ii8+PC9zdmc+');
  cursor: pointer;
  user-select: none;
}

.player__hero-wrap {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: darken($color-background, 10%);
  border-radius: $player-border-radius $player-border-radius 0 0;
}

.player__hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: darken($color-background, 10%);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSI1NjAiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSItMTgwIC0yOCA1NjAgMjU2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC0xODAgLTI4IDU2MCAyNTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNDQ0NDQ0MiIGQ9Ik0xMDAgMEM0NC43NyAwIDAgNDQuNzcgMCAxMDBjMCA1NS4yMyA0NC43NyAxMDAgMTAwIDEwMCA1NS4yMyAwIDEwMC00NC43NyAxMDAtMTAwQzIwMCA0NC43NyAxNTUuMjMgMCAxMDAgMHpNMTAwIDEzMy44NmMtMTguNyAwLTMzLjg2LTE1LjE2LTMzLjg2LTMzLjg2IDAtMTguNyAxNS4xNi0zMy44NiAzMy44Ni0zMy44NnMzMy44NiAxNS4xNiAzMy44NiAzMy44NkMxMzMuODYgMTE4LjcgMTE4LjcgMTMzLjg2IDEwMCAxMzMuODZ6Ii8+PC9zdmc+');
  background-size: cover;
  background-position: center center;

  &.is-loaded::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba($color-primary, 0.5), transparent 20%);
  }

  &.is-next {
    animation: animateInRight 550ms cubic-bezier(0.22, 0.81, 0.36, 1);
  }

  &.is-previous {
    animation: animateInLeft 550ms cubic-bezier(0.22, 0.81, 0.36, 1);
  }
}

@keyframes animateInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes animateInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

.player__hero-aspect {
  padding-top: $player-hero-height / $player-width * 100%;
}


.player__duration {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  z-index: 1;
  @extend %clearfix;

  &::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 0;
    width: 100%;
    height: 13px;
    background: linear-gradient(to top, $color-background, transparent 2px);
  }
}

.player__timeline {
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  cursor: pointer; 
  transition: all 0.35s ease 0.35s;

  .player__duration:hover &,
  &.is-dragging {
    height: 10px;
    top: -10px;
    background: rgba($color-shadow, 0.2);
    transition: all 0.25s ease;
  }
}

.player__timeline-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $color-accent;
  transform-origin: 0 0;
  transform: scaleX(0);
  will-change: transform;
  pointer-events: none;
}

.player__time {
  margin: 4px 5px 0 5px;
  font-size: 9px;
  line-height: 1;
}

.player__time--current {
  float: left;
}

.player__time--total {
  float: right;
}

.player__content {
  display: flex;
  flex-shrink: 0;
  position: relative;
  width: 100%;
  padding: 0 10px 15px;
  border-radius: 0 0 $player-border-radius $player-border-radius; 

  @include bp(medium) {
    padding: 0 15px 15px;
  }
}

.player__main {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  align-items: center;
  width: 0;
  padding-top: 5px;
}

.player__meta {
  position: relative;
  top: -2px;
  flex-grow: 1;
  flex-basis: 0;
  width: 0;
  margin-left: 10px;

  @include bp(medium) {
    margin-left: 20px; 
  }
}

.player__info {
  margin: 0;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;

  a {
    color: inherit;
  }
}

.player__info--track {
  color: scale-color($color-text, $saturation: -50%, $lightness: 20%);
  font-size: 16px;

  @include bp(medium) {
    font-size: 18px;
  }
}

.player__info--artist {
  color: $color-text-weak;
  font-size: 12px; 
}

.player__sub-controls {
  display: flex;
  padding: 3px 0 0 10px;

  @include bp(medium) {
    padding: 10px 0 0 15px;
  }
}

.control {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: none;
  cursor: pointer;
  appearance: none;
  transition: background-color .15s cubic-bezier(0.5, 1, 0.5, 1);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center center no-repeat;
  }

  .player__sub-controls > & {
    margin-right: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.control--primary {
  width: 35px;
  height: 35px;

  @include bp(medium) {
    width: 50px;
    height: 50px;
  }
}

.control--play {
  background-color: $color-primary;
  border-radius: 50%;

  &::before {
    left: 1px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDE5IDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxOSAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGMkQ3OSIgZD0iTTAuNjEgMTFjMC0wLjU1IDAtMS40NSAwLTJWMWMwLTAuNTUgMC42LTAuNzggMS4wOC0wLjUybDcuNCA0LjAzYzAuNDggMC4yNyAxLjMyIDAuNzEgMS44IDAuOThsNy4xNCA0LjAyYzAuNDggMC4yNyAwLjQ5IDAuNzEgMC4wMSAwLjk4bC03LjIgNC4wM2MtMC40OCAwLjI3LTEuMjYgMC43MS0xLjc0IDAuOThsLTcuNDEgNC4wM0MxLjIxIDE5Ljc4IDAuNjEgMTkuNTUgMC42MSAxOVYxMXoiLz48L3N2Zz4=');
    background-size: 13px auto;

    @include bp(medium) {
      left: 2px;
      background-size: auto;
    }
  }

  &.is-playing::before {
    left: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDE1IDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNSAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGMkQ3OSIgZD0iTTE1IDE5YzAgMC41NS0wLjQ1IDEtMSAxaC0xYy0wLjU1IDAtMS0wLjQ1LTEtMVYxYzAtMC41NSAwLjQ1LTEgMS0xaDFjMC41NSAwIDEgMC40NSAxIDFWMTl6Ii8+PHBhdGggZmlsbD0iI0ZGMkQ3OSIgZD0iTTMgMTljMCAwLjU1LTAuNDUgMS0xIDFIMWMtMC41NSAwLTEtMC40NS0xLTFWMWMwLTAuNTUgMC40NS0xIDEtMWgxYzAuNTUgMCAxIDAuNDUgMSAxVjE5eiIvPjwvc3ZnPg==');
  }

  .player__main & {
    margin: 0 5px;
  }
}

.control--loop {
  &::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0I5QkZDQyIgZD0iTTE1LjI1IDQuODVsLTEuNjktMS4zdjEuMzVINS40MSA1LjA3Yy0yLjM3IDAuMTMtNC4yNiAyLjA4LTQuMjYgNC40OCAwIDAuOTYgMC4zMSAxLjg0IDAuODEgMi41N2wxLjY0LTEuNjRjLTAuMTMtMC4yOC0wLjIxLTAuNi0wLjIxLTAuOTMgMC0xLjE2IDAuODgtMi4xIDIuMDEtMi4yM2gwLjM0IDguMTZ2MS42bDEuNjktMS4zIDEuNjktMS4zTDE1LjI1IDQuODV6Ii8+PHBhdGggZmlsbD0iI0I5QkZDQyIgZD0iTTQuNzUgMTUuMTVsMS42OSAxLjNWMTUuMWg4LjE2IDAuMzRjMi4zNy0wLjEzIDQuMjYtMi4wOCA0LjI2LTQuNDggMC0wLjk2LTAuMy0xLjg0LTAuODEtMi41N2wtMS42NCAxLjY0YzAuMTMgMC4yOCAwLjIxIDAuNiAwLjIxIDAuOTMgMCAxLjE2LTAuODggMi4xLTIuMDEgMi4yM2gtMC4zNEg2LjQ0di0xLjZMNC43NSAxMi41NSAzLjA2IDEzLjg1IDQuNzUgMTUuMTV6Ii8+PC9zdmc+');
  }

  &.is-looping::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzNCMzY0NCIgZD0iTTE1LjI1IDQuODVsLTEuNjktMS4zdjEuMzVINS40MSA1LjA3Yy0yLjM3IDAuMTMtNC4yNiAyLjA4LTQuMjYgNC40OCAwIDAuOTYgMC4zMSAxLjg0IDAuODEgMi41N2wxLjY0LTEuNjRjLTAuMTMtMC4yOC0wLjIxLTAuNi0wLjIxLTAuOTMgMC0xLjE2IDAuODgtMi4xIDIuMDEtMi4yM2gwLjM0IDguMTZ2MS42bDEuNjktMS4zIDEuNjktMS4zTDE1LjI1IDQuODV6Ii8+PHBhdGggZmlsbD0iIzNCMzY0NCIgZD0iTTQuNzUgMTUuMTVsMS42OSAxLjNWMTUuMWg4LjE2IDAuMzRjMi4zNy0wLjEzIDQuMjYtMi4wOCA0LjI2LTQuNDggMC0wLjk2LTAuMy0xLjg0LTAuODEtMi41N2wtMS42NCAxLjY0YzAuMTMgMC4yOCAwLjIxIDAuNiAwLjIxIDAuOTMgMCAxLjE2LTAuODggMi4xLTIuMDEgMi4yM2gtMC4zNEg2LjQ0di0xLjZMNC43NSAxMi41NSAzLjA2IDEzLjg1IDQuNzUgMTUuMTV6Ii8+PC9zdmc+');
  }
}

.control--previous,
.control--next {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: $color-primary-weak;

  &:hover,
  .is-focusable &:focus {
    background-color: $color-primary;
  }
}

.control--previous {
  &::before {
    left: -1px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMy4yMyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTMuMjMgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTMuMjI2IDkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNC4wOSA2Ljc1IDguMjMgOSA4LjIzIDYuMTMgOS4xNSA2Ljc1IDEzLjIzIDkgMTMuMjMgNC41IDEzLjIzIDAgOS4yNCAyLjI1IDguMjMgMi45IDguMjMgMCA0LjE4IDIuMjUgMCA0LjUgIi8+PC9zdmc+');
  }
}

.control--next {
  &::before {
    left: 1px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMy40NSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTMuNDUgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTMuNDUxIDkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOS4zNiAyLjI1IDUgMCA1IDIuODcgNC4wOCAyLjI1IDAgMCAwIDQuNSAwIDkgMy45OCA2Ljc1IDUgNi4xIDUgOSA5LjI3IDYuNzUgMTMuNDUgNC41ICIvPjwvc3ZnPg==');
  }
}

.control--volume {
  &::before {
    background-position: left center;
  }

  &[data-volume="off"]::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gZmlsbD0iI0I5QkZDQyIgcG9pbnRzPSIxMCAzLjUgNC45MyA2LjUgMCA2LjUgMCAxMy41IDQuOTMgMTMuNSAxMCAxNi41ICIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0I5QkZDQyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTcuNjMiIHkxPSI3LjYxIiB4Mj0iMTIuNTkiIHkyPSIxMi42NCIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0I5QkZDQyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTIuNTkiIHkxPSI3LjYxIiB4Mj0iMTcuNjMiIHkyPSIxMi42NCIvPjwvc3ZnPg==');
  }

  &[data-volume="med"]::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gZmlsbD0iIzNCMzY0NCIgcG9pbnRzPSIxMCAzLjUgNC45MyA2LjUgMCA2LjUgMCAxMy41IDQuOTMgMTMuNSAxMCAxNi41ICIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNCMzY0NCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTIuNDIgMTMuNjFjMS4zNC0wLjY1IDIuMjctMi4wMiAyLjI3LTMuNnMtMC45My0yLjk2LTIuMjctMy42Ii8+PC9zdmc+');
  }

  &[data-volume="max"]::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gZmlsbD0iIzNCMzY0NCIgcG9pbnRzPSIxMCAzLjUgNC45MyA2LjUgMCA2LjUgMCAxMy41IDQuOTMgMTMuNSAxMCAxNi41ICIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNCMzY0NCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTIuNDIgMTMuNjFjMS4zNC0wLjY1IDIuMjctMi4wMiAyLjI3LTMuNnMtMC45My0yLjk2LTIuMjctMy42Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjM0IzNjQ0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xNC44NSAxNS40MWMyLjAxLTAuOTcgMy40LTMuMDMgMy40LTUuNDEgMC0yLjM4LTEuMzktNC40NC0zLjQtNS40MSIvPjwvc3ZnPg==');
  }
}

.volume {
  position: relative;

  .player__controls & {
    height: 20px;
  }
}

.volume__slider {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -$volume-slider-height - 10px;
  left: 50%;
  width: 32px;
  height: $volume-slider-height;
  z-index: 10;
  background: $color-background;
  cursor: pointer;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  border-radius: 5px;
  box-shadow: 0 5px 8px rgba($color-shadow, 0.15);
  transition: transform 0.15s cubic-bezier(0.7,0,0.3,1) 0.15s;

  &::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    border-top: 6px solid $color-background;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    transform: translateX(-50%);
  }

  .volume:hover &,
  &.is-dragging {
    transform: translateX(-50%) scale(1);
    transition: transform 0.15s cubic-bezier(0.7,0,0.3,1) 0.05s;
  }
}

.volume__track {
  position: relative;
  width: $volume-track-width;
  height: $volume-slider-height - 30px;
  background: $color-primary-weak;
}

.volume__track-level {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $color-accent;
  transform: scaleY(0);
  transform-origin: bottom center;
}

.volume__thumb {
  position: absolute;
  bottom: -$volume-thumb-size / 2;
  left: (-$volume-thumb-size / 2) + ($volume-track-width / 2);
  width: $volume-thumb-size;
  height: $volume-thumb-size;
  background: $color-primary;
  border-radius: 50%;
}

.overlay {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  background: rgba($white, 0.8);
  transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1), visibility 0s 0.3s;

  .is-overlayed & {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0, 0.5, 0.5, 1);
  }
}

.overlay__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDUwIDUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzNCMzY0NCIgZD0iTTI1LjcxIDI1TDQ3Ljg1IDIuODVjMC4yLTAuMTkgMC4yLTAuNTEgMC0wLjcxcy0wLjUxLTAuMTktMC43MSAwTDI1IDI0LjI5IDIuODUgMi4xNWMtMC4xOS0wLjE5LTAuNTEtMC4xOS0wLjcxIDBzLTAuMTkgMC41MSAwIDAuNzFMMjQuMjkgMjUgMi4xNSA0Ny4xNWMtMC4xOSAwLjItMC4xOSAwLjUxIDAgMC43MUMyLjI0IDQ3Ljk1IDIuMzcgNDggMi41IDQ4czAuMjYtMC4wNSAwLjM1LTAuMTVMMjUgMjUuNzFsMjIuMTUgMjIuMTVDNDcuMjQgNDcuOTUgNDcuMzcgNDggNDcuNSA0OHMwLjI2LTAuMDUgMC4zNS0wLjE1YzAuMi0wLjE5IDAuMi0wLjUxIDAtMC43MUwyNS43MSAyNXoiLz48L3N2Zz4=');
}

.modal {
  display: none;
  width: 100%;
  max-width: 740px;
  margin: auto;
  padding: 70px 15px;

  &.is-visible {
    display: block;
  }
}
              
            
!

JS

              
                var player = (function (player) {
  'use strict';

  player.settings = {
    defaultVolume: 0.5
  };

  player.el = document.querySelector('.player');

  player.audio = new Audio();
  player.audio.preload = 'auto';

  player.playing = false;

  player.trackLength = 0;

  player.init = function(userConfig) {

    for (var key in userConfig.settings) {
      if (key in player.settings) {
        player.settings[key] = userConfig.settings[key];
      }
    }

    // init submodules
    player.soundcloud.init();
    player.playlist.init(userConfig.playlist);
    player.audioState.init();
    player.scrubber.init();
    player.volumeHandler.init();
    player.playButton.init();
    player.nextButton.init();
    player.prevButton.init();
    player.loopButton.init();
    player.shortkeys.init();
    player.focusCapability.init();

    player.load.firstTrack();
  };

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.volumeHandler = (function() {

    var volumeThumb = document.querySelector('.volume__thumb');
    var volumeSlider = document.querySelector('.volume__slider');
    var volumeButton = document.querySelector('.control--volume');
    var volumeTrack = document.querySelector('.volume__track');
    var volumeTrackLevel = document.querySelector('.volume__track-level');
    var volumeTrackPosY = volumeTrack.getBoundingClientRect().top;
    var volumeTrackHeight = volumeTrack.offsetHeight;
    var dragging;

    // Required because IE ignores the css transform on volume slider when calculating .getBoundingClientRect()
    var volumeTrackHeightTransformed = volumeTrack.getBoundingClientRect().height;
    var positionFix = volumeTrackHeight - volumeTrackHeightTransformed;
    if (volumeTrackHeight !== volumeTrackHeightTransformed) {
      positionFix += volumeTrack.offsetTop;
    }

    function init() {
      utilities.initLocalStorageItem('audioPlayerVolume', player.settings.defaultVolume, function(value) {
        player.audio.volume = parseFloat(value);
      });

      player.audio.addEventListener('volumechange', moveVolumeSlider, false);
      volumeButton.addEventListener('click', handleVolumeButton, false);
      volumeSlider.addEventListener('mousedown', handleVolumeDrag, false);
      window.addEventListener('resize', updateTrackPosition, false);

      moveVolumeSlider();
    }

    function moveVolumeSlider() {
      var volume = player.audio.volume;
      var posY = (volume * volumeTrackHeight);
      var trackLevelScale = posY / volumeTrackHeight;

      volumeThumb.style.cssText = '-webkit-transform: translateY(-' + posY + 'px); transform: translateY(-' + posY + 'px)';
      volumeTrackLevel.style.cssText = '-webkit-transform: scaleY(' + trackLevelScale + '); transform: scaleY(' + trackLevelScale + ')';

      if (volume === 1.0) {
        volumeButton.setAttribute('data-volume', 'max');
        if (!dragging) {
          localStorage.setItem('audioPlayerVolume', volume);
        }
      } else if (volume === 0.0) {
        volumeButton.setAttribute('data-volume', 'off');
      } else {
        volumeButton.setAttribute('data-volume', 'med');
        if (!dragging) {
          localStorage.setItem('audioPlayerVolume', volume);
        }
      }
    }

    function handleVolumeButton() {
      if (player.audio.volume > 0.0) {
        player.audio.volume = 0.0;
      } else {
        player.audio.volume = parseFloat(localStorage.getItem('audioPlayerVolume'));
      }
    }

    function handleVolumeDrag(e) {
      dragging = true;
      volumeDragging(e);
      player.el.classList.add('is-dragging');
      volumeSlider.classList.add('is-dragging');
      document.addEventListener('mousemove', volumeDragging, false);
      document.addEventListener('mouseup', volumeDraggingFinished, false);
    }

    function volumeDragging(e) {
      var mouseY = e.clientY;
      var posY = Math.min(Math.max((mouseY - volumeTrackPosY + positionFix), 0), volumeTrackHeight);
      player.audio.volume = posY / volumeTrackHeight * -1 + 1;
    }

    function volumeDraggingFinished() {
      this.removeEventListener('mousemove', volumeDragging, false);
      this.removeEventListener('mouseup', volumeDraggingFinished, false);
      dragging = false;
      moveVolumeSlider();
      player.el.classList.remove('is-dragging');
      volumeSlider.classList.remove('is-dragging');
    }

    function updateTrackPosition() {
      volumeTrackPosY = volumeTrack.getBoundingClientRect().top;
    }

    return {
      init: init
    }

  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.soundcloud = (function() {

    var id = 'c16d13689ab8f80a1d0453612575354e'

    function init() {
      SC.initialize({
        client_id: id
      });
    }

    return {
      init: init,
      id: id
    }

  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.shortkeys = (function() {

    var space = 32;
    var arrowLeft = 37;
    var arrowUp = 38;
    var arrowRight = 39;
    var arrowDown = 40;

    function init() {
      document.addEventListener('keydown', keyboardFunctionality, false);
    }

    function keyboardFunctionality(e) {

      var key = e.which || e.keyCode;
      var volume = player.audio.volume;

      if (key === space && !player.focusCapability.on) {
        e.preventDefault();
        player.playButton.handleClick();
      } else if (key === arrowLeft) {
        player.prevButton.handleClick();
      } else if (key === arrowRight) {
        player.load.nextTrack();
      } else if (key === arrowUp) {
        if (volume > 0.9) {
          player.audio.volume = 1.0;
        } else {
          player.audio.volume = volume + 0.1;
        }
      } else if (key === arrowDown) {
        if (volume < 0.1) {
          player.audio.volume = 0.0;
        } else {
          player.audio.volume = volume - 0.1;
        }
      }
    }

    return {
      init: init
    };
  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.scrubber = (function() {

    var timeHandler = document.querySelector('.player__timeline');
    var timeHandlerTouch = document.querySelector('.player__duration');
    var timeLine = document.querySelector('.player__timeline-inner');
    var timePlayed = document.querySelector('.player__time--current');
    var timeTotal = document.querySelector('.player__time--total');
    var timeLinePosX = timeLine.getBoundingClientRect().left;
    var dragging;

    function init() {
      player.audio.addEventListener('timeupdate', renderTimePlayed, false);
      timeHandlerTouch.addEventListener('touchstart', handleScrubbing, false);
      timeHandler.addEventListener('mousedown', handleScrubbing, false);
      window.addEventListener('resize', updateTimeLinePosition, false);
    }

    function renderTimePlayed() {
      timePlayed.innerHTML = formatTime(player.audio.currentTime);
    }

    function renderTimeTotal() {
      timeTotal.innerHTML = formatTime(player.trackLength);
    }

    function goToTime(e) {
      var eventX = e.changedTouches ? e.changedTouches[0].pageX : e.clientX;
      var x = (eventX < timeLinePosX) ? 0 : eventX - timeLinePosX;

      player.audio.currentTime = Math.min(Math.floor(x / timeHandler.offsetWidth * player.trackLength), player.trackLength);
      triggerEvents();
    }

    function handleScrubbing(e) {
      player.scrubber.dragging = true;

      if (player.playing) {
        player.audio.pause();
      }

      goToTime(e);
      player.el.classList.add('is-dragging');
      timeHandler.classList.add('is-dragging');

      if (e.type === 'touchstart') {
        document.addEventListener('touchmove', goToTime, false);
        document.addEventListener('touchend', scrubbingFinished, false);
        document.addEventListener('touchcancel', scrubbingFinished, false);
      } else {
        document.addEventListener('mousemove', goToTime, false);
        document.addEventListener('mouseup', scrubbingFinished, false);
      }
    }

    function scrubbingFinished(e) {
      e.preventDefault();

      if (player.playing) {
        if (player.audio.ended && !player.audio.loop) {
          player.load.nextTrack();
        } else {
          player.audio.play();
        }
      }

      player.scrubber.dragging = false;
      player.el.classList.remove('is-dragging');
      timeHandler.classList.remove('is-dragging');
      this.removeEventListener('mousemove', goToTime, false);
      this.removeEventListener('mouseup', scrubbingFinished, false);
      this.removeEventListener('touchmove', goToTime, false);
      this.removeEventListener('touchend', scrubbingFinished, false);
      this.removeEventListener('touchcancel', scrubbingFinished, false);
    }

    function updateTimeLinePosition() {
      timeLinePosX = timeLine.getBoundingClientRect().left;
    }

    function triggerEvents() {
      renderTimePlayed();
      moveTimeline();
    }

    function formatTime(s) {
      var s = Math.floor(s) || 0;
      var m = 0;

      if (s >= 60) {
        for (; s >= 60; s = s - 60) {
          m++;
        }
      }

      if (s < 10) {
        s = '0' + s;
      }

      return m + ':' + s;
    }

    function moveTimeline() {
      var currentPosition = player.audio.currentTime / player.trackLength;
      timeLine.style.cssText = '-webkit-transform: scaleX(' + currentPosition + '); transform: scaleX(' + currentPosition + ')';
    }

    return {
      init: init,
      triggerEvents: triggerEvents,
      formatTime: formatTime,
      moveTimeline: moveTimeline,
      renderTimeTotal: renderTimeTotal,
      dragging: dragging
    };

  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.prevButton = (function() {

    var prevButton = document.querySelector('.control--previous');

    function init() {
      prevButton.addEventListener('click', handleClick, false);
    }

    function handleClick() {
      if (player.audio.currentTime > 4) {
        player.audio.currentTime = 0;
        player.scrubber.triggerEvents();
      } else {
        player.load.prevTrack();
      }
    }

    return {
      init: init,
      handleClick: handleClick
    };
  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.playlist = (function() {

    var index;
    var playlist;
    var playlistLength;

    function init(playlist) {
      load(playlist);

      utilities.initLocalStorageItem('audioPlayerIndex', index, function(value) {
        var localStorageIndex = parseInt(value);
        localStorageIndex > playlistLength ? index = playlistLength : index = localStorageIndex;
      });
    }

    function load(playlistData) {
      playlist = playlistData;
      playlistLength = playlist.length - 1;
      index = 0;
    }

    function nextIndex() {
      var tempIndex = index;
      tempIndex === playlistLength ? tempIndex = 0 : tempIndex++;
      return tempIndex;
    }

    function prevIndex() {
      var tempIndex = index;
      tempIndex === 0 ? tempIndex = playlistLength : tempIndex--;
      return tempIndex;
    }

    function next() {
      return playlist[nextIndex()];
    }

    function prev() {
      return playlist[prevIndex()];
    }

    function current() {
      return playlist[index];
    }

    function setNext() {
      index = nextIndex();
      localStorage.setItem('audioPlayerIndex', index);
      return playlist[index];
    }

    function setPrev() {
      index = prevIndex();
      localStorage.setItem('audioPlayerIndex', index);
      return playlist[index];
    }

    return {
      init: init,
      load: load,
      next: next,
      prev: prev,
      setNext: setNext,
      setPrev: setPrev,
      current: current
    };

  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.playButton = (function() {

    var playButton = document.querySelector('.control--play');

    function init() {
      playButton.addEventListener('click', handleClick, false);
    }

    function handleClick() {
      if (player.audio.ended && !player.audio.loop) {
        player.playing = true;
        player.load.nextTrack();
      } else if (player.audio.paused) {
        player.audio.play();
      } else {
        player.audio.pause();
        player.playing = false;
      }
    }

    return {
      init: init,
      handleClick: handleClick,
      el: playButton
    };
  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.nextButton = (function() {

    var nextButton = document.querySelector('.control--next');

    function init() {
      nextButton.addEventListener('click', player.load.nextTrack, false);
    }

    return {
      init: init
    };
  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.loopButton = (function() {

    var loopButton = document.querySelector('.control--loop');

    function init() {
      loopButton.addEventListener('click', handleClick, false);
    }

    function handleClick() {
      if (!player.audio.loop) {
        player.audio.loop = true;
        loopButton.classList.add('is-looping');
      } else {
        player.audio.loop = false;
        loopButton.classList.remove('is-looping');
      }
    }

    return {
      init: init
    };
  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.load = (function() {

    var trackName = document.querySelector('.player__info--track');
    var trackArtist = document.querySelector('.player__info--artist');
    var trackImageWrap = document.querySelector('.player__hero-wrap');
    var trackImage = document.querySelector('.player__hero');

    function loadTrack(data, animationClass) {
      player.audio.pause();

      if (typeof data.trackSource === 'number') {
        var trackUrl = '/tracks/' + data.trackSource;

        SC.get(trackUrl, function(SC_data) {
          renderSC(data, SC_data, animationClass);
          handleReadyState();
        });

      } else {
        render(data, animationClass);
        handleReadyState();
      }
    }

    function firstTrack() {
      loadTrack(player.playlist.current());
      preloadPlaylistImg(player.playlist.next());
      preloadPlaylistImg(player.playlist.prev());
    }

    function nextTrack() {
      loadTrack(player.playlist.setNext(), 'is-next');
      preloadPlaylistImg(player.playlist.next());
    }

    function prevTrack() {
      loadTrack(player.playlist.setPrev(), 'is-previous');
      preloadPlaylistImg(player.playlist.prev());
    }

    function preloadPlaylistImg(data) {
      if (data.image) {
        preloadImg(data.image);
      } else if (typeof data.trackSource === 'number') {
        var trackUrl = '/tracks/' + data.trackSource;

        SC.get(trackUrl, function(SC_data) {
          var imageSource = data.image || replaceArtworkString(SC_data.artwork_url, 'large', 't500x500');
          preloadImg(imageSource);
        });

      }
    }

    function preloadImg(source, callback) {
      var tempImg = new Image;

      tempImg.onload = function() {
        if (callback) {
          callback();
        }
        tempImg = null;
      };

      tempImg.src = source;
    }

    function renderHeroImg(source, animationClass) {
      var oldImgEl = document.querySelectorAll('.player__hero');
      var oldimgElLen = oldImgEl.length;

      function handleAnimationEnd() {
        if (oldimgElLen) {
          trackImageWrap.removeChild(oldImgEl[oldimgElLen - 1]);
        }
        newImgEl.classList.remove(animationClass);
        newImgEl.removeEventListener('animationend', handleAnimationEnd, false);
      }

      if (animationClass) {
        var newImgEl = document.createElement('div');
        newImgEl.className = 'player__hero ' + animationClass;

        preloadImg(source, function() {
          newImgEl.style.backgroundImage = 'url(' + source + ')';
          newImgEl.className += ' is-loaded';
        });

        trackImageWrap.appendChild(newImgEl);
        newImgEl.addEventListener('animationend', handleAnimationEnd, false);
      } else {
        if (oldimgElLen) {
          oldImgEl[oldimgElLen - 1].style.backgroundImage = 'url(' + source + ')';
        } else {
          var newImgEl = document.createElement('div');
          newImgEl.className = 'player__hero';

          preloadImg(source, function() {
            newImgEl.style.backgroundImage = 'url(' + source + ')';
            newImgEl.className += ' is-loaded';
          });

          trackImageWrap.appendChild(newImgEl);
        }
      }
    }

    function decideHeroRenderMethod(heroImageSrc, animationClass) {
      if (Modernizr.cssanimations && animationClass) {
        renderHeroImg(heroImageSrc, animationClass);
      } else {
        renderHeroImg(heroImageSrc);
      }
    }

    function renderSC(data, SC_data, animationClass) {
      var title = data.trackName || SC_data.title.slice(SC_data.title.indexOf('-') + 1).trim();
      var heroImageSrc = data.image || replaceArtworkString(SC_data.artwork_url, 'large', 't500x500');

      decideHeroRenderMethod(heroImageSrc, animationClass);
      player.audio.src = SC_data.uri + '/stream?client_id=' + player.soundcloud.id;
      trackArtist.innerHTML = data.artist || SC_data.title.slice(0, SC_data.title.indexOf('-')).trim();
      trackName.innerHTML = '<a href="' + SC_data.permalink_url + '">' + title + '</a>';
      player.trackLength = SC_data.duration / 1000;
      player.scrubber.renderTimeTotal();
      player.scrubber.triggerEvents();
    }

    function render(data, animationClass) {
      var heroImageSrc = data.image || 'dist/img/hero_2.png';

      decideHeroRenderMethod(heroImageSrc, animationClass);
      player.audio.src = data.trackSource;
      trackArtist.innerHTML = data.artist || 'Various Artists';
      trackName.innerHTML = data.trackName || 'Various Songs';
      player.trackLength = 0;
      player.scrubber.renderTimeTotal();
      player.scrubber.triggerEvents();
    }

    function handleReadyState() {
      if (player.audio.readyState >= 1) {
        trackMetaLoaded();
      } else {
        player.audio.addEventListener('loadedmetadata', trackMetaLoaded, false);
      }
    }

    function trackMetaLoaded() {
      player.trackLength = player.audio.duration;
      player.scrubber.renderTimeTotal();

      if (player.playing) {
        player.audio.play();
      }
    }

    function replaceArtworkString(string, partToReplace, replacement) {
      var index = string.lastIndexOf(partToReplace);
      var strEnd = string.slice(index + partToReplace.length);
      var strStart = string.slice(0, index);
      var newString = strStart + replacement + strEnd;

      return newString;
    }

    return {
      track: loadTrack,
      firstTrack: firstTrack,
      nextTrack: nextTrack,
      prevTrack: prevTrack
    };

  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.focusCapability = (function() {

    var on = false;
    var tab = 9;

    function init() {
      document.addEventListener('keydown', addVisualFocus, false);
    }

    function addVisualFocus(e) {
      var key = e.which || e.keyCode;

      if (key === tab) {
        player.focusCapability.on = true;
        player.el.classList.add('is-focusable');
        document.addEventListener('mousedown', removeVisualFocus, false);
      }
    }

    function removeVisualFocus() {
      player.focusCapability.on = false;
      player.el.classList.remove('is-focusable');
      this.removeEventListener('click', removeVisualFocus, false);
    }

    return {
      init: init,
      on: on
    };
  })();

  return player;
})(player || {});

var player = (function (player) {
  'use strict';

  player.audioState = (function() {

    var triggerDuringPlay;

    function init() {
      player.audio.addEventListener('play', playing, false);
      player.audio.addEventListener('pause', paused, false);
      player.audio.addEventListener('ended', ended, false);
    }

    function moveTimeline() {
      player.scrubber.moveTimeline();
      triggerDuringPlay = requestAnimationFrame(moveTimeline);
    }

    function playing() {
      player.playing = true;
      player.playButton.el.classList.add('is-playing');
      triggerDuringPlay = requestAnimationFrame(moveTimeline);
    }

    function paused() {
      cancelAnimationFrame(triggerDuringPlay);

      if (!player.playing) {
        player.playButton.el.classList.remove('is-playing');
      }
    }

    function ended() {
      cancelAnimationFrame(triggerDuringPlay);

      if (!player.audio.loop && player.playing && !player.scrubber.dragging) {
        player.load.nextTrack();
      }
    }

    return {
      init: init
    };
  })();

  return player;
})(player || {});

(function() {
  'use strict';

  var body = document.body;
  var overlay = document.querySelector('.overlay');
  var closeBtn = document.querySelector('.overlay__close');
  var openBtn = document.querySelectorAll('[data-target-modal]');

  bindListeners();

  function openModal() {
    var previousModal = document.querySelector('[data-modal].is-visible');
    var targetName = this.getAttribute('data-target-modal');
    var targetModal = document.querySelector('[data-modal="' + targetName +'"]');

    if (previousModal && previousModal !== targetModal) {
      previousModal.classList.remove('is-visible');
    }

    targetModal.classList.add('is-visible');
    body.classList.add('is-overlayed');
  }

  function bindListeners() {
    for (var i = 0; i < openBtn.length; i++) {
      openBtn[i].addEventListener('click', openModal, false);
    }

    overlay.addEventListener('click', removeOverlayClass, false);
  }

  function removeOverlayClass(e) {
    var target = e.target;
    
    if (target === overlay || target === closeBtn) {
      body.classList.remove('is-overlayed');
    }
  }

})();

var utilities = (function() {
  'use strict';

  function initLocalStorageItem(property, defaultValue, callback) {
    var returnedValue = localStorage.getItem(property);

    if (!returnedValue) {
      localStorage.setItem(property, defaultValue);
      callback(defaultValue);
    } else {
      callback(returnedValue);
    }
  }

  return {
    initLocalStorageItem: initLocalStorageItem
  };
})();

/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
 * Build: https://modernizr.com/download/#-cssanimations
 */
;window.Modernizr=function(a,b,c){function w(a){i.cssText=a}function x(a,b){return w(prefixes.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b){for(var d in a){var e=a[d];if(!z(e,"-")&&i[e]!==c)return b=="pfx"?e:!0}return!1}function B(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}function C(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+m.join(d+" ")+d).split(" ");return y(b,"string")||y(b,"undefined")?A(e,b):(e=(a+" "+n.join(d+" ")+d).split(" "),B(e,b,c))}var d="2.8.3",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l="Webkit Moz O ms",m=l.split(" "),n=l.toLowerCase().split(" "),o={},p={},q={},r=[],s=r.slice,t,u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=s.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(s.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(s.call(arguments)))};return e}),o.cssanimations=function(){return C("animationName")};for(var D in o)v(o,D)&&(t=D.toLowerCase(),e[t]=o[D](),r.push((e[t]?"":"no-")+t));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),h=j=null,e._version=d,e._domPrefixes=n,e._cssomPrefixes=m,e.testProp=function(a){return A([a])},e.testAllProps=C,e}(this,this.document);

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                               || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
})();



player.init({
  settings: {
    defaultVolume: 0.5
  },
  playlist: [
    {
      trackSource: 108073729
    },
    {
      trackSource: 232008211,
      artist: 'Carpenter Brut',
      trackName: 'Roller Mobster (Scattle Remix)'
    },
    {
      trackSource: 62323212
    }
  ]
});
              
            
!
999px

Console