Cacher is the code snippet organizer for pro developers

body{
  background:url(http://31.media.tumblr.com/17b062d8170b0cd6e1b4a63db7e20df1/tumblr_n8zm9idM4J1st5lhmo1_1280.jpg)no-repeat center center fixed white;
  background-size: cover;
  margin:0;
  padding:0;
} 
#player {
  display: none;
}
.controls {
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 40px;
  background: #FFF;
  border-bottom: 1px solid #CCC;
  color: #333;
  padding: 0;
  margin: 0;
  z-index: 99999;
  transition:all 1s ease;
}
.controls a.next,
.controls a.play,
.controls a.eject{
  border-right: 1px solid #E0E0E0;
  color: #34495E;
  padding-top: 10px;
}
.controls a.eject{
  float:right;
}
.controls a {
  width: 40px;
}
.controls a,
.station_playing,
.volume {
  height: 40px;
  padding: 10px;
  line-height: 18px;
  display: inline-block;
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  border-right: 1px solid #E0E0E0;
}
.volume input[type="range"] {
  -webkit-appearance: none;
  background-color: #F8F8F8;
  height: 18px;
  width: 170px;
  box-shadow: inset 1px 1px 3px #C5C5C5;
}
.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #34495E;
  box-shadow: 1px 2px 3px #C5C5C5;
}
.station_playing {
  color: #34495E;
  margin-left: 5px;
  padding-left: 25px;
  padding-right: 25px;
  text-align: center;
  border-right: 1px solid #E0E0E0;
  font-size: 1em;
}
/* = table
------------------------*/
.radios {
  font: normal 12px/150% Arial, Helvetica, sans-serif;
  position: absolute;
  top: -100%;
  left: 0;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 40px;
  display: block;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid #C9C9C9;
  transition: all 1s ease;
  z-index: 1;
}
.radios table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.radios table thead th {
  background-color: #34495E;
  color: #FFF;
  text-align: center;
  padding: 0.5em;
  font-family: 'Lato', sans-serif;        
  font-weight: 700;
  font-size: 1em;
  height: 2em;
  vertical-align: top;
}
.radios table tbody td,
.radios table tbody tr {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 1em;
  border: none;
  padding: 1em;
  transition:background 0.5s ease;
}
.radios table tbody tr:nth-child(odd) {
  background: #FCFCFC;
  color: #7F8C8D;
}
.radios table tbody tr:nth-child(even) {
  background: #E9E9E9;
  color: #7F8C8D;
}
.radios table tbody tr:hover {
  background: #2C3E50;
  color: #FFF;
  cursor: pointer;
  transition:background 0.5s ease;
}
.show{
  top:0;
  left:0;
  transition:all 1s ease;
}
.infoPen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 200px;
  text-align: center;
  color: #25282C;
}
@media (max-width: 768px) {
  .volume {
    display: none;
  }
  .station_playing {
    font-size: 10px;
  }
  .radios table tbody tr a {
    font-size: 10px;
  }
  .radios table tbody td,
  .radios table tbody tr {
    font-size: 10px;
  }
  .playIcon {
    font-size: 18px;
  }
}

var radio = (function() {
  'use strict';
  // Global vars 
  var urls = [];
  var next = 0;

  return {
    // options
    options: {
      "url": "https://dl.dropboxusercontent.com/u/23834858/api/radios.json"
    },
    // ready
    init: function() {
      this.callJson();
      this.next_song();

      // on ready add class 
      var c = setTimeout(function(){
        document.querySelector('.controls').classList.add('show');
        clearTimeout(c);
      },1000);          
    },
    // show or hide radios 
    showOrhide:function(){
      var radios = document.querySelector('.radios');
      if(radios.classList.contains('show')){
        radios.classList.remove('show');
      }else{
        radios.classList.add('show');
      }
    },
    // load player
    load_player: function() {
      var self = this;
      var audioPlayer = new Audio();
      audioPlayer.id = 'thePlayer';
      audioPlayer.controls = "controls";
      audioPlayer.addEventListener('ended', this.next_song, false);
      audioPlayer.addEventListener('error', this.errorSong, true);
      document.getElementById("player").appendChild(audioPlayer);
      this.next_song();
    },
    // next song
    next_song: function() {
      if (urls[next] !== undefined) {
        var audioPlayer = document.getElementsByTagName('audio')[0];
        if (audioPlayer !== undefined) {
          audioPlayer.src = urls[next];
          audioPlayer.load();
          audioPlayer.play();
          this.playerList('<i class="fa fa-stop"></i>');
          var playNow = document.querySelector('#id_' + next);
          playNow.innerHTML = '<i class="fa fa-play"></i>';
          document.querySelector('.play').innerHTML = '<i class="fa fa-pause"></i>';
          document.querySelector('.station_playing').innerHTML = playNow.getAttribute('title');
          next++;
        } else {
          this.load_player();
        }
      } else {
        next = 0;
      }
    },
    // on error next song
    errorSong: function() {
     return  this.nextSong();
    },
    // play pause
    playPause: function() {
      var audioPlayer = document.getElementsByTagName('audio')[0];
      if (audioPlayer !== undefined) {
        if (audioPlayer.paused) {
          audioPlayer.play();
          document.querySelector('.play').innerHTML = '<i class="fa fa-pause"></i>';
        } else {
          audioPlayer.pause();
          document.querySelector('.play').innerHTML = '<i class="fa fa-play"></i>';
        }
      } else {
        this.load_player();
      }
    },
    // take song num,station
    takeSong: function(num, st) {
      next = num;
      document.querySelector('.station_playing').innerHTML = st;
      document.querySelector('.play').innerHTML = '<i class="fa fa-pause"></i>';
      this.next_song();
    },
    // take volue .foo,value
    takeVolume: function(obj, el) {
      var theplayer = document.querySelector(obj);
      theplayer.volume = '0.' + el;
      return el;
    },
    // json data
    callJson: function() {
      var self = this,
          ajax = new XMLHttpRequest();
      ajax.open('GET', self.options.url, true);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
          if (ajax.status == 200) {
            // parse to json data
            var obj = JSON.parse(ajax.responseText);
            // get controls template
            document.querySelector('.controls').innerHTML = self.template_player();
            // get radios template
            document.querySelector('.radios').innerHTML = self.template_list(obj);
            // stop icon for all
            self.playerList('<i class="fa fa-stop"></i>');
            // start first radio
            self.takeSong('1', obj.radios[1].station);
          } else {
            // Error
            console.log(ajax.status);
          }
        }
      };
      ajax.send();
    },

    template_player: function() {

      var html =
          '<a href="#" onclick="radio.playPause()" class="play"><i class="fa fa-pause"></i></a>  ' +
          '<a href="#" onclick="radio.next_song()" class="next"><i class="fa fa-step-forward"></i></a>' +
          '<span class="station_playing"></span>' +
          '<div class="volume"><input type="range" min="0" max="9" onchange="radio.takeVolume(\'#thePlayer\',this.value)"/></div>'+
          '<a href="#" onclick="radio.showOrhide()" class="eject"><i class="fa fa-eject"></i></a>';

      return html;
    },


    template_list: function(obj) {
      var html = '<table>' +
          '<thead>' +
          '<tr>' +
          '<th></th>' +
          '<th>Station</th>' +
          '<th>Genre</th>' +
          '<th>Bitrate</th>' +
          '</tr>' +
          '</thead>' +
          '<tbody>';

      Array.prototype.forEach.call(obj.radios, function(elem, index) {
        // urls[0] = foo.mp3
        urls[index] = elem.url;
        // template
        html += '<tr>' +
          '<td class="playIcon" id="id_' + index + '" title="' + elem.station + '"></td>' +
          '<td class="station" onclick="radio.takeSong(' + index + ',\'' + elem.station + '\')">' +
          elem.station + '</td>' +
          '<td class="genre">' + elem.genre + '</td>' +
          '<td class="bibrate">' + elem.bitrate + '</td>' +
          '</tr>';
      });
      html +=
        '</tbody>' +
        '</table>';

      return html;
    },
    playerList: function(el) {
      var playIcon = document.querySelectorAll('.playIcon');
      Array.prototype.forEach.call(playIcon, function(selector, index) {
        selector.innerHTML = el;
      });
    }
  };

})();

radio.init();

<div id="player"></div>
<div class="controls"></div>
<div class="radios"></div>

<div class="infoPen">
  <h1>Online Radio with Json data</h1>
  <h2>You can use also mp3 links</h2>
</div>