Documentation

Detailed Installation

  1. There are several assets (js and css files that you need to include in your page before you can use the plugin. These are:

    • jQuery
    • Yep Nope dependency loader - this is included in the plugin folder
    • The Boulevard plugin javascript file
    • The Boulevard css file

    You should have the following markup in your page:

        
        <link href="path/to/plugin/css/style.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="path/to/plugin/plugin/yepnope.js"></script>
        <script src="path/to/plugin/plugin/ttw-music-player.js"></script>
        
    

    Boulevard uses several other javascript files, but these will be auto loaded by the plugin.

  2. You will need to initialize the Boulevard plugin. The basic format for initializing Boulevard is:

    $('someSelector').ttwBoulevardPlayer(yourPlaylist, options);

    Here's an example where I initialize Boulevard on a div element with an id = 'music-player'

        
        //first let's creat the playlist
    
        var myPlaylist = [
        {
            mp3:'playlist-folder/1.mp3',
            duration:'1:25',
            cover:'playlist-folder/cover-art/1.jpg',
            title:'Some Song Title',
            artist:'Some Artist'
        },
        {
            mp3:'playlist-folder/2.mp3',
            duration:'3:45',
            cover:'playlist-folder/cover-art/2.jpg',
            title:'Some Other Song Title',
            artist:'Some Other Artist'
        }
        ];
    
        //now let's initialize the plugin
        $('#music-player').ttwBoulevardPlayer(myPlaylist, {
           styleType:'blur'
        });
        
    
You can download fully functional examples that work out of the box by purchasing a developer license. Download Examples Now