Documentation

Playlist Setup

Overview

The Boulevard playlist is specified as an array of objects. Each object in the array represents one audio track. The properties on the object dictate how the plugin will process the media item. For example, the following represents one audio track in a MediaBox playlist


    {mp3:'http://www.somewebsite.com/audio/somemedia.mp3'}

Here's a simple playlist array with three tracks.


    var playlist = [
        {mp3:'http://www.somewebsite.com/audio/1.mp3'},
        {mp3:'http://www.somewebsite.com/audio/2.mp3'},
        {mp3:'http://www.somewebsite.com/audio/3.mp3'}
    ]

Boulevard is built on jPlayer, which requires one of the following formats to be supplied: MP3 M4A Note that, there is little to no benefit in providing both, due to the way support pans out with HTML5 browsers supporting either both or neither. You can read more about the formats that jPlayer supports here: jPlayer formats

Setting additional information about each playlist item

In addition to the mp3/m4a path, there are several other properties that you can include about each playlist item. These are:

  1. cover - This is the url to an image file for the album cover
  2. background - If you would like a background image associated with this playlist item, this is the url to that image
  3. title - The title of the playlist item
  4. artist - The artist for this playlist item
  5. duration - the duration in minutes in seconds
  6. This is the url to an image file for the album cover

A sample playlist item with all properties


    {
        mp3: 'http://www.somewebsite.com/audio/somemedia.mp3',
        title: 'Test audio file',
        artist: 'Test artist',
        cover: 'http://www.somewebsite.com/audio/somemedia.jpg',
        background: 'http://www.somewebsite.com/audio/somemedia_bg.jpg',
        duration:'3:54'
    }
    

A sample playlist with three items



    var playlist = [
        {
            mp3: 'http://www.somewebsite.com/audio/1.mp3',
            title: 'Test audio file',
            artist: 'Test artist',
            cover: 'http://www.somewebsite.com/audio/1.jpg',
            background: 'http://www.somewebsite.com/audio/1_bg.jpg',
            duration:'3:54'
        },
        {
            mp3: 'http://www.somewebsite.com/audio/2.mp3',
            title: 'Test audio file 2 ',
            artist: 'Test artist',
            cover: 'http://www.somewebsite.com/audio/2.jpg',
            background: 'http://www.somewebsite.com/audio/2.jpg',
            duration:'2:13'
        },
        {
            mp3: 'http://www.somewebsite.com/audio/3.mp3',
            title: 'Test audio file 3',
            artist: 'Test artist',
            cover: 'http://www.somewebsite.com/audio/3.jpg',
            background: 'http://www.somewebsite.com/audio/3_bg.jpg',
            duration:'6:42'
        }
    ]


    
You can download fully functional examples that work out of the box by purchasing a developer license. Download Examples Now