website/public/js/music.js

var player = '';

$(document).ready(function() {
  player = new MediaElementPlayer('#music-player', {
    // initial volume when the player starts
    startVolume: 0.5,
    // useful for <audio> player loops
    loop: false,
    // enables Flash and Silverlight to resize to content size
    enableAutosize: true,
    // change the size of the audio player,
    audioWidth: '100%',
    // the order of controls you want on the control bar (and other plugins below)
    features: ['playpause','progress','current','duration','tracks','volume'],
    // Hide controls when playing and mouse is not over the video
    alwaysShowControls: false,
    // force iPad's native controls
    iPadUseNativeControls: false,
    // force iPhone's native controls
    iPhoneUseNativeControls: false,
    // force Android's native controls
    AndroidUseNativeControls: false,
    // forces the hour marker (##:00:00)
    alwaysShowHours: false,
    // turns keyboard support on and off for this instance
    enableKeyboard: true,
    // when this player starts, it will pause other players
    pauseOtherPlayers: true
  });

  $('.now-playing-list .music-track').on('click', function() {
    // change the audio source
    changeAudioSources(e);
  });
});

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