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').on('click', function() { // change selected album changeSelectedAlbum(this); }); }); function changeSelectedAlbum(albumElem) { var oldSelected = $('.music-album.selected'); var newSelected = $(albumElem); 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(); }