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 = '
  • ' + '' + song.track_order + '. ' + song.title + '' + '
  • '; 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(); }