Documentation

API Events


playlistInit

This event is fired when the boulevard playlist is initialized

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('playlistInit', function(){
        //do something in here when the playlist is initialized
    });
    

started

This event is fired when the plugin has completely started

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('started', function(){
        //do something when the plugin has completely started
    });
    

initPlaylistAdvance

This event fires when song is about to change, but before it has started to play

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('initPlaylistAdvance', function(e, indexOfNextSong){
        //do something in here when the playlist is about to advance
    });
    

playlistAdvance

This event fires when the song is changing

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('playlistAdvance', function(e, direction){
        //do something in here when the playlist advances.
        //direction has either prev or next in it
    });
    

colorsProcessed

The plugin will process the colors for the images associated with each song. This event is fired once the colors have been processed

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('colorsProcessed', function(e, imageColors, lightOrDarkClass){
        //do something in here when the colors for the current cover image are processed.
        //the dominant color is availabe in imageColors.dominant
        //lightOrDarkClass will be light-bg or dark-bg
    });
    

settingLayout

This event fires when the layout has started to be initialized.

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('settingLayout', function(e, newLayoutName){
        //do something in here when the layout starts switching
        //the options variable holds the options for the new layout
    });
    

layoutSet

This event fires when the layout has been set

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('layoutSet', function(e){
        //do something in here when the layout starts switching
        //the options variable holds the options for the new layout
    });
    

settingBackground

This event fires when the the background is being generated.

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

        boulevard.on('settingBackground', function(e, styleType){
            //do something in here when the background is being generated
            //the styleType variable holds the background style (i.e. blur)
        });
    

backgroundSet

This event fires when the background has been set

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

        boulevard.on('backgroundSet', function(e){
            //do something in here when the background has been Set
        });
    

layoutSwitching

This event fires when the layout is being switched to a new layout.

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('layoutSwitching', function(e, options){
        //do something in here when the layout starts switching
        //the options variable holds the options for the new layout
    });
    

layoutSwitchComplete

This event fires when the layout has finished switching

    
    var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist);

    boulevard.on('layoutSwitchComplete', function(e){
        //do something in here when the layout has finished switching
    });
    
You can download fully functional examples that work out of the box by purchasing a developer license. Download Examples Now