### 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](http://bfil.github.io/bf-player) ### 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](http://nicolasgallagher.com/pure-css-gui-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: ```xml

``` ### Browser Checking You can **check if the borwser supports the audio element** through javascript in the following way: ```javascript 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): ```javascript 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: ```javascript // creates an html5 audio object var audio = new Audio(""); // 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: ```javascript // chages the source audio.src = ""; audio.load(); ``` The **volume** can be changed in the following way: ```javascript // 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: ```javascript 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: ```javascript audio.pause(); audio.currentTime = 80; // in seconds audio.play(); ``` To listen to the **end of playback**: ```javascript audio.addEventListener('ended', function() { // do what you want }); ``` There's also an event that tracks the **download progress** of the audio track: ```javascript 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 ```xml

``` And **initialize** it like this: ```javascript var player = new Player(id, tracks, options); ``` You can also **set the tracks** later on: ```javascript 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 ```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" ] }; ``` ### 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: ```css /* 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](http://nicolasgallagher.com/pure-css-gui-icons/), 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](http://bfil.github.io/bf-player)

Moving to London

Recent Posts

Coding Without Limits

Standardising Microservices at Scale

How Code Becomes Legacy

Twitter Feed

Contact Info

Current Location

E-mail

Social