/*--------------------------------------------------------------------------- * Omniplayer jQuery plugin * * Description: * The Omniplayer jquery plugin provides Hear It Local developers with a way to * put an audio player on their website that features independent artists from the * Hear It Local database. * * Notable Features: * - It can be used multiple times on the same page. * - Pay music based on playlist type. * - Display detailed information about artists, including other songs they may have. * - Play all available and upcoming songs from artists in a given performance stored in the * in the Hear It Local database * - And then some... * * Options: * playerType: The Hear It Local entity that owns the playlist that the player will default to. (default:promoter) * id: The Hear It Local database identifier for the entity whose music is being requested. (default:1 - Bay Vibes Promoter ID) * smSwfUrl: The relative path to the directory that holds the SoundManager 2 Flash SWF files.(default: "swf/") * playByDefault: Automatically start playing the Omniplayer playlist once the Omniplayer code has loaded.(default: false) * siteDomain: TThe root domain of the site that is hosting the Omniplayer plugin. (default: "") * artistImageSize: The size, in pixels, of the square thumbnail image for the currently playing artist (default: "") * maxArtistName: The maximum number of characters allowed for the artist name in the main display and in the artist flyout. (default: 30) * maxSongName: The maximum number of characters allowed for the song title in the main display. (default: 200) * * Owner: Hear It Local * Developer: Maurice Wright * Last Updated: * 2012.01.17 Added the onPlayerLoad() callback function/method * 2012.01.13 Added the onSongChange() callback function/method * Fixed the problem with songs playing a few seconds when playByDefault is false * 2011.12.08 * *---------------------------------------------------------------------------*/ (function($){ $.fn.omniplayer = function(options) { // ------------------------------------------ // Load the options var o = $.extend({}, $.fn.omniplayer.defaults, options); var thisObj = $(this); // ------------------------------------------ // Set the options inside of the DOM element this[0][0] = o; // ------------------------------------------ // Grab any parameters that may have been set manually o.parentName = (o.parentName=='') ? $(this).attr('id') : o.parentName; o.messageDiv = (o.messageDiv=='') ? $(this).find('.op-song-loading') : o.messageDiv; o.btnPlay = (o.btnPlay=='') ? $(this).find('.oplink-play') : o.btnPlay; o.btnPause = (o.btnPause=='') ? $(this).find('.oplink-pause') : o.btnPause; o.btnStop = (o.btnStop=='') ? $(this).find('.oplink-stop') : o.btnStop; o.btnNext = (o.btnNext=='') ? $(this).find('.oplink-next') : o.btnNext; o.btnPrev = (o.btnPrev=='') ? $(this).find('.oplink-prev') : o.btnPrev; o.btnPlayApiDiv = (o.btnPlayApiDiv=='') ? $('.omni-trigger-div') : o.btnPlayApiDiv; o.btnPlayApiHref = (o.btnPlayApiHref=='') ? $('.omni-trigger-href') : o.btnPlayApiHref; o.btnVolumeSlider = (o.btnVolumeSlider=='') ? $(this).find('.omni-button-volume') : o.btnVolumeSlider; // ------------------------------------------ // The volume slider isn't being used by all themes // Comment out the code for cases where it's not being used. if ( $(this).find('.omni-button-volume').length > 0 ) { // ------------------------------------------ // Set the volume slider parameters the volume DOM elements o.volMinX = o.btnVolumeSlider.position().left; o.volRange = $(this).find('.omni-volume-slider').width() - o.btnVolumeSlider.width(); o.volMaxX = o.volMinX + o.volRange; volXpos = (o.smDefaultVolume/100)*o.volRange; // ------------------------------------------ // Set the volume slider position based on the default volume o.btnVolumeSlider.position({ my: 'left', at: 'left', of: '#' + o.parentName + ' .omni-volume-slider', offset: volXpos + ' 0' }); //console.log(o.volMinX, o.volRange, o.volMaxX, volXpos); // ------------------------------------------ // Initialize the volume slider o.btnVolumeSlider.draggable({ axis: 'x', containment: '.omni-volume-slider', // Drag current position of dragged image. drag: function(event, ui) { // Show the current dragged position of image var currentPos = $(this).position().left; var song = thisObj[0]['song']; var volume = (currentPos/o.volRange)*100; song.setVolume(volume); //$("div#xpos").text("Left: " + currentPos.left + "\nTop: " + currentPos.top); } }); } // ------------------------------------------ // Set the default PLAY button behavior (.oplink-play) o.btnPlay.live('click',function(e){ e.preventDefault(); $.fn.omniplayer.omniPlay(thisObj,'pause'); }); // ------------------------------------------ // Set the default PAUSE button behavior (.oplink-pause) o.btnPause.live('click',function(e){ e.preventDefault(); $.fn.omniplayer.omniPause(thisObj); }); // ------------------------------------------ // Set the default STOP button behavior (.oplink-stop) o.btnStop.live('click',function(e){ e.preventDefault(); $.fn.omniplayer.omniStop(thisObj); }); // ------------------------------------------ // Set the default NEXT button behavior (.oplink-play) o.btnNext.live('click',function(e){ e.preventDefault(); $.fn.omniplayer.omniNext(thisObj); }); // ------------------------------------------ // Set the default PREVIOUS button behavior (.oplink-prev) o.btnPrev.live('click',function(e){ e.preventDefault(); $.fn.omniplayer.omniPrev(thisObj); }); // ------------------------------------------ // Set the default PLAY from API button behavior (.omni-play) o.btnPlayApiDiv.live('click',function(e){ e.preventDefault(); $.fn.omniplayer.omniPlayAPI($(this),thisObj,true); }); // ------------------------------------------ // Set the default PLAY from API button behavior (.omni-play) o.btnPlayApiHref.live('click',function(e){ e.preventDefault(); $.fn.omniplayer.omniPlayAPI($(this),thisObj,false); }); // ------------------------------------------ // Get to work return this.each(function() { // ------------------------------------------ // Instantiate the object we'll use to pass to the private functions var obj = $(this); // ------------------------------------------ // Set the parameters for the paging filter initializeOmniplayer(obj); }); }; // ------------------------------------------------------------------------------------------ // Expose defaults to allow users to define them independently $.fn.omniplayer.defaults = { playByDefault: false, owner: 'Hear It Local', siteDomain: '', filePath: '', apiDomain: 'hearitlocal.com', promoterID: 1, id: 1, playerType: '', urlApi: 'http://hearitlocal.com/api/', url: 'http://hearitlocal.com/api/promoterMedia&promoter=', urlArtist: 'http://hearitlocal.com/api/artist&id=', urlPlaylist: 'http://hearitlocal.com/api/promoterMediaPlus&promoter=', songUrl: 'http://hearitlocal.com/api/getSong&song=', smSwfUrl: 'swf/', smUseFlashBlock: false, smDebugMode: false, smDefaultVolume: 40, parentName: 'omniplayer', maxTracksInHistory: 5, maxArtistName: 30, maxSongName: 200, scrollAnimationTime: 15000, btnPlay: '', btnPause: '', btnStop: '', btnNext: '', btnPrev: '', btnPlayApiDiv: '', btnPlayApiHref: '', btnVolumeSlider: '', messageDiv: '', artistImageSize: '', volMinX: 370, volMaxX: 417, onSongChange: function(){}, onPlayerLoad: function(){} }; // ------------------------------------------------------------------------------------------ // Initialize Omniplayer for the first time function initializeOmniplayer(obj) { // ------------------------------------------ // Get the options from the DOM array position 0,0 o = obj[0][0]; // ------------------------------------------ // What is the API url that we'll be retrieving the song data from? switch(o.playerType) { case 'promoter': o.url = o.urlApi + 'promoterMediaPlus&promoter=' + o.id; break; case 'region': o.url = o.urlApi + 'regionMedia&id=' + o.id; break; case 'venue': o.url = o.urlApi + 'venueMedia&id=' + o.id; break; case 'artist': o.url = o.urlApi + 'artistMediaPlus&id=' + o.id; break; default: o.url = o.url + o.promoterID; } var url = o.url; //console.log(url); // ------------------------------------------ // Initialize SoundManager soundManager.url = o.smSwfUrl; soundManager.useFlashBlock = o.smUseFlashBlock; soundManager.debugMode = o.smDebugMode; soundManager.defaultOptions.volume = o.smDefaultVolume; // ------------------------------------------ // Launch SoundManager soundManager.onready(function() { // ------------------------------------------ // Retrieve music data $.get( url, function(data){ // ***REMINDER***: Remember to add the cacheHasher stuff back in rows = data.rows; // ------------------------------------------ // If no data is returned, stop processing if ( data.rows.length == 0 ) { $('.op-artist-name').html('No Songs Available'); $('.op-song-title').html(o.owner); return; } // ------------------------------------------ // Playlist and song information will be contained within the OmniPlayer DOM array as follows: // // $('#omniplayer')[0]['song'] ==> An object containing the song being played // $('#omniplayer')[0]['playlist'] ==> An array of the playlist // $('#omniplayer')[0]['playlistDefault'] = data.rows; // $('#omniplayer')[0]['usingDefault'] ==> A flag indicating whether the default playlist is being used // $('#omniplayer')[0]['defaultPosition'] ==> The song index position of the default playlist // $('#omniplayer')[0]['history'] ==> An array of the history // $('#omniplayer')[0]['playlistHistory'] ==> An array of the playlist history (defined in omniplayerPlaylist.js) // $('#omniplayer')[0]['position'] ==> Position in the playlist array // $('#omniplayer')[0]['volume'] ==> Song volume (0-100) // // The Playlist array will be formatted as follows (for now) // // playlist[i]['artistID'] ==> artistID // playlist[i]['artistName'] ==> artistName // playlist[i]['artistThumb'] ==> artistThumb // playlist[i]['artistSmallThumb'] ==> artistSmallThumb // playlist[i]['artistImage'] ==> artistImage // playlist[i]['songURL'] ==> songURL // playlist[i]['songTitle'] ==> songTitle // playlist[i]['songID'] ==> songID // // ------------------------------------------ // Assign music data to a position in the OmniPlayer DOM array obj[0]['playlist'] = playlist = data.rows.songData; obj[0]['playlistDefault'] = data.rows.songData; obj[0]['usingDefault'] = true; obj[0]['history'] = new Array(); obj[0]['playlistHistory'] = new Array(); obj[0]['position'] = 0; obj[0]['volume'] = o.smDefaultVolume; // ------------------------------------------ // The following code is used for testing the API feed // for (var i in playlist) { // songTitle = playlist[i]['songTitle']; // artistName = playlist[i]['artistName']; // songURL = playlist[i]['songURL']; // alert( songTitle + ' by ' + artistName + ' (' + songURL + ')\\n'); // } // ------------------------------------------ // SM2 has loaded - now you can create and play sounds! // We'll initially start with the first record in the playlist obj[0]['song'] = soundManager.createSound({ id: 'aSound', url: 'http://hearitlocal.com' + playlist[0]['songURL'] //url: 'http://hearitlocal.com/accelsite/media/mediaFile563.mp3' // onload: [ event handler function object ], // other options here.. }); song = obj[0]['song']; addToHistory(playlist[0],obj); // ------------------------------------------ // Play the first song song.play({ onfinish: function() { //playSong(1,obj); $.fn.omniplayer.playSong(1,obj); }, whileplaying: function() { // ------------------------------------------ // Pause the first song if the playByDefault flag is set to false if ( !o.playByDefault ) $.fn.omniplayer.omniPause(obj); // ------------------------------------------ // Show song loading info $('#duration').html(song.position + ' ' + song.durationEstimate + ' ' + song.duration); } }); // ------------------------------------------ // Set the volume to zero if playByDefault is false; if ( !o.playByDefault ) song.setVolume(0); // ------------------------------------------ // Display the artist's meta data showArtistInfo(0,obj); // ------------------------------------------ // Execute the onSongChange() callback function song = obj[0]['playlist'][0]; if ( typeof o.onSongChange=='function' && o.playByDefault ) o.onSongChange.call(this,song); // ------------------------------------------ // Execute the onSongChange() callback function if ( typeof o.onPlayerLoad=='function' ) o.onPlayerLoad.call(this,song); }, 'jsonp' ); }); return; } // ------------------------------------------------------------------------------------------ // Manage player history function addToHistory(song,obj) { // ------------------------------------------ // Get the options from the DOM array position 0,0 o = obj[0][0]; // ------------------------------------------ // Check for a long song title if ( song.songTitle.length > 30 ) { songTitle = song.songTitle.substring(0,26) + '...'; } else { songTitle = song.songTitle; } // ------------------------------------------ // Modify the history playlist var history = new Array(); history = obj[0]['history']; //( history instanceof Array ) ? alert('is array') : alert('not array'); // ------------------------------------------ // Now that we have the history array, make sure that a duplicate isn't being added to the viewable list. maxTracks = o.maxTracksInHistory; // ------------------------------------------ // Start looping with item 0 if there are less than maxTracks number of items in history. if (history.length > 0 ) { startTrack = (history.length < maxTracks) ? 0 : history.length - maxTracks; //alert(startTrack + ':' + (history.length)); for (i=startTrack;i