BF-Player in Action

If you're interested in seeing the Player in action, I've built a project page for it, where you can find all the informations about the player:

Go To BF-Player Project Page

Introduction

I've decided to build an audio player to try out the new html5 media capabilities, I've ended implementing other features provided by html5 and css3 as well (range inputs, css3 styling, and pure css3 icons).

The player is able to playback the audio tracks and check the supported audio formats of the browser before playing them.

It provides:

• The classic player controls

• A seek bar (if range html5 input is supported)

• A volume controller (through a range input, same as above)

• A mute button switch

• A playlist with the files loaded in the player (and also shows the available formats of the audio tracks, it can also be collapsed)

HTML5 Audio Element

You can embed an html audio player directly with html in the following way:

<!-- a simple audio element which autoplays a track and loops -->
<audio src="sample.mp3" autoplay loop></audio>

<!-- an audio player with controls and multiple source files (and with a fallback for older browsers also) -->
<audio controls>
    <source src="sample.ogg" type="audio/ogg" >
    <source src="sample.mp3" type="audio/mp3" >
    The audio tag is not supported by your browser! =(
</audio>

Browser Checking

You can check if the borwser supports the audio element through javascript in the following way:

function isAudioTagSupported() {
    return !!(document.createElement('audio').canPlayType);
}

And we also need to check if the audio type can be played by the browser (for instance, not all browsers support mp3 playback, or ogg, so we must check before playing a file):

function isAudioTypeSupported(type) {
    return (audioType != null && document.createElement('audio').canPlayType(type));
}

// sample usage
isAudioTypeSupported("audio/mp3");

Audio Controls

The HTML5 audio element can be handled with javascript, it has a very simple usage:

// creates an html5 audio object
var audio = new Audio("<path to the audio track>");

// plays the file
audio.play();

// pauses the file
audio.pause();

// stops the playback (you must pause and seek to the start of the track)
audio.pause();
if(audio.currentTime != 0) audio.currentTime = 0;

If you want to switch the source of the audio object without creating a new object you can do:

// chages the source
audio.src = "<new file path>";
audio.load();

The volume can be changed in the following way:

// chages the volume
audio.volume = 80 // range: 0-100

// mutes the audio
audio.mutes = true

The HTML5 Audio element also triggers many events, for exampl,e to listen to time updates during a playback you can attach the following event listener to the audio object:

audio.addEventListener('timeupdate', function() {
    var length = audio.duration;
    var secondss = audio.currentTime;
    var progress = (secondss / length) * 100;
    // do what you need to on time update
});

To seek to a chosen position on the audio track:

audio.pause();
audio.currentTime = 80; // in seconds
audio.play();

To listen to the end of playback:

audio.addEventListener('ended', function() {
    // do what you want
});

There's also an event that tracks the download progress of the audio track:

audio.addEventListener('progress', function() {
    var loaded = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
});

Here's a list of some other events. which are quite self-explainatory: loadstart, loadedmetadata, loadeddata, stalled, waiting, playing, seeking, seeked.

BF-Player Structure

The player source is structured in the following way:

• HTML5.js - Checks for audio tag, range input, and progress support

• Util.js - Some utility functions

• Track.js and File.js - Handles the tracks and files (multiple file for each track to handle different types)

• Player.js - The core of the player, it handles the creation of the layout, and bind it to the audio functions

• SCSS Files - SASS stylesheets that need to be compiled to css

Initializing the player

To actually use the player, you need to put a div inside your html page, like this

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

And initialize it like this:

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

You can also set the tracks later on:

player.setTracks(tracks);

Loading tracks with multiple file types

The tracks in the playlist supports multiple file types, the file type is handled by the player itself based on the file extension of the files provided

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 Layout and Style

The layout of the player is created with jQuery during the player initialization.

The page can contain multiple instances of the player, because all are handled separately, you just need to specify a different div container for each player.

The CSS is compiled from SASS files sources, I've used this approach to be able to change easily the player colors and dimensions modifying the variables on top of the player.scss file:

/* SASS VARIABLES */
$player-width: 370px;
$player-color-1: #cccccc;
$player-color-2: #186883;
$slider-color-1: #777;
$slider-color-2: #99a;
$box-color-1: #333;
$box-color-2: #0B323F;
$text-color-hover: #5cabb8;
$error-color: #b55;

CSS3 Icons

The icons that you can see on the player aren't images, but pure CSS3 icons, I've taken them from here, and modified them a bit to have them fits my needs.

Be sure to check them out, they're pretty cool. =)

Conclusion

You can feel free to browse the source code on GitHub, if you experience any problems I'de be glad to hear some feedback about it.

If you still haven't, you can go to the project page following the link:

Go To BF-Player Project Page