Documentation

Background Styles

There are several background styles to chose from


Blur

This sets the background as a blurred version of the album cover for the currently playing song

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            styleType:'blur'
        });
    

Blur Player

This is similar to the blur option, but it only blurs the background of the player

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            styleType:'blur-player'
        });
    

Overlay

Allows you to set the background as an image and then place an overlay over that image. The image is set to black and white before the overlay is applied. Overlays can be a solid color or they can be a gradient

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            styleType:'overlay'
        });
    

Overlay Simple

This is similar to the overlay option, but the image is not set to black and white.

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            styleType:'overlay-simple'
        });
    

Dominant Color

This extracts the dominant color from the ablum cover (or background property) and sets the player backgroun to this color

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            styleType:'dominant-color'
        });
    

Image

This sets the background to an image and allows you to apply filters to the image. You have full access to all of the filters provided by Caman JS

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            styleType:'image'
        });
    
    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            styleType:'image'
            //you can set image filters that will be applied dynamically using the imageEffects parameter,
            //you can apply any of the effects provided by CamanJS. The imageEffects paremeter accepts an pipe delimited list
            //http://camanjs.com/
            imageEffects:'sepia[20]|contrast[30]'
        });
    

Solid Colors

This provides several pre designed styles (i.e. blue, orange, white, etc)

    
        var boulevard = $('#myPlayer').ttwBoulevard(myPlaylist, {
            //solid-blue, solid-orange, solid-green, solid-purple, solid-pink, solid-blue2, solid-white, solid-white2,
            //solid-dark
            styleType:'solid-blue'
        });
    
You can download fully functional examples that work out of the box by purchasing a developer license. Download Examples Now