website/public/js/music.js

var player = '';

$(document).ready(function() {
  player = $('#music-player').get(0);

  // on music track click
  $('.now-playing-list .music-track').on('click', function() {
    // change selected track
    changeSelectedTrack(this);
  });

  // on album art click
  $('.music-album .thumbnail').on('click', function() {
    // change selected album
    changeSelectedAlbum(this);
  });
});

function changeSelectedAlbum(albumElem) {
  var oldSelected = $('.music-album.selected');
  var newSelected = $(albumElem).parent();

  if (oldSelected.data('albumid') != newSelected.data('albumid')) {
    // remove selected class from the old element and add it to the new one
    oldSelected.removeClass('selected');
    newSelected.addClass('selected');

    // change album info
    getAlbumInfo(albumElem);
    // change available songs
    getAlbumSongs(albumElem);
  }
}

function getAlbumInfo(albumElem) {
  albumElem = $(albumElem).parent();

  $.get('/apiv1/music/album-info/' + albumElem.data('albumid'), function(data) {
    var json = $.parseJSON(data);

    // change album artwork
    $('#album-artwork').attr('src', json.album_art);
    // change album title
    $('#album-title').text(json.title);
    // change album description
    $('#album-description').text(json.description);
  });
}

function getAlbumSongs(albumElem) {
  albumElem = $(albumElem).parent();

  $.get('/apiv1/music/album-songs/' + albumElem.data('albumid'), function(data) {
    var json = $.parseJSON(data);
    var playlist = $('#now-playing-list');
    playlist.empty();

    for (var i = 0; i < json.songs.length; i++) {
      var song = json.songs[i];
      var classString = '';

      if (i === 0) {
        classString = 'music-track selected';
      } else {
        classString = 'music-track';
      }

      var songElem = '<li class="' + classString + '" data-trackid="' + song.id + '" data-title="' + song.title + '" data-album="' + song.album_id + '" data-order="' + song.track_order + '" data-path="' + song.audio_file + '">' +
          '<span>' + song.track_order + '. ' + song.title + '</span>' +
          '</li>';

      playlist.append(song);
    }
  });
}

function changeSelectedTrack(trackElem) {
  var oldSelected = $('.now-playing-list .music-track.selected');
  var newSelected = $(trackElem);

  if (oldSelected.data('trackid') != newSelected.data('trackid')) {
    // remove selected class from the old element and add it to the new one
    oldSelected.removeClass('selected');
    newSelected.addClass('selected');

    // now change the audio sources
    changeAudioSources(trackElem);
  }
}

function changeAudioSources(trackElem) {
  trackElem = $(trackElem);
  var playerSources = $('#music-player source');

  // retrieve audio file path from selected element
  var audioFilePath = trackElem.data('path');

  // loop through the audio player source elements
  playerSources.each(function() {
    // jQuery-ize the element
    source = $(this);

    if (source.attr('type') == 'audio/ogg') {
      // OGG source file
      source.attr('src', audioFilePath + '.ogg');
    } else if (source.attr('type') == 'audio/mpeg') {
      // MP3 source file
      source.attr('src', audioFilePath + '.mp3');
    }
  });

  // reload music player
  player.load();
  // start playing new song
  player.play();
}