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').parent();
  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 available songs
  }
}

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();
}