BF Player - HTML5/CSS3 Player

The player uses the new HTML5 Audio API, and other HTML5 input tags (Range/Progress).

The stylesheet uses some cool CSS3 feature (for example, the icons of the controls are pure CSS3 icons, they're not images).

The player shows the current track title, time and duration.

It has controls to handle playback, seeking, volume/mute, and a playlist toggler.

The player tracks can reference multiple files, of different types, and lets the user choose which file type to play, it also checks if the browser supports the media type playback before playing it.

The player support some options, such as autoplay or autoadvance.

Read the Documentation for more info.

This example creates a Player with 2 Tracks in playlist.
To each track can be assigned multiple files, to handle different media types.

/* HTML */
<div id="myPlayer"></div>

/* Javascript */
var tracks = new Array();
tracks[0] = { title: "Song 1", files: [ "song1.ogg", "song1.mp3" ] };
tracks[1] = { title: "Song 2", files: [ "song2.ogg", "song2.mp3" ] };
var player = new Player("myPlayer", tracks);

The tracks can be specified later on.
And the player supports some options too, in this example autoplay is enabled.

var player = new Player("myDivId", null, { autoplay: true });
player.setTracks(tracks);

Requirements

JQuery is required

Player

var player = new Player(id, tracks, options);

The parameters of the Player constructor are:

• id: The ID of the container Div, where the Player will "appear".
• tracks: The Tracks to load in the Player (can be null)
• options: The Options/Settings Object (can be null)

You can load new tracks into the player whenever you need, using:

player.setTracks(tracks);

Tracks

var tracks = new Array();
tracks[0] = { title: "Song 1", files: [ "song1.ogg", "song1.mp3" ] };
tracks[1] = { title: "Song 2", files: [ "song2.ogg", "song2.mp3" ] };

The Tracks must be an array of Objects having 2 properties:

• title: The Title of the audio track
• files: An Array of uris (should be files of different types). The following file types are supported: MP3, OGG or WAV

Options

var options = { autoplay: true, autoadvance: true };
var Player = new Player("myDivId", tracks, options);

You can specify the following options for the Player:

• autoplay (default: false): specifies wether the playing should start automatically on page load.
• autoadvance (default: false): specifies wether the player should automatically advance on the next track when a track ends.
• repeatAll (default: false): specifies wether the player should repeat all tracks or stop when the last one ends.
• volume (default: 100, min:0, max: 100): the starting volume.

Latest Chrome version supports almost everything the player provides, so you should try it out with it, to see almost every feature in action.

The player checks if HTML5 elements are supported by the browser, if not, the elements (such as the progress bar) are hidden if the browser doesn't support them (for example in Firefox 3.6 the progress bar and the volume aren't shown).

The player is disabled if the browser doesn't support HTML5 audio (try it in IE8 or previous versions).

The player checks if a file type is playable before playing the audio files.

Copyright (C) 2011 by Bruno Filippone

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

The source code is on GitHub