bbplayer

Demo

About

bbplayer is a minimalist HTML5 Audio player. With bbplayer you can:

• make a playlist of tracks
• design your own buttons or use the ones included
• put more than one player on a page, but them play one at a time
• support all browsers with MP3 and OGG formats

bbplayer uses CSS classes. Start with a bbplayer class containing controls like bb-rewind, bb-play, bb-forward, etc. and the HTML5 audio element; bbplayer.js takes care of the rest.

How-to

Add the stylesheet in the `head` of your HTML page:

<link rel="stylesheet" href="css/bbplayer.css">

Add controls, audio and sources:

<div class="bbplayer">
   <span class="bb-rewind"></span>
   <span class="bb-play"></span>
   <span class="bb-forward"></span>
   <span class="bb-trackTime"></span>
   <span class="bb-trackLength"></span>
   <span class="bb-trackTitle"></span>
   <audio>
     <!-- 
     playlist of audio files in MP3 and
     OGG format for cross browser support
     -->
     <source src="media/bluebrowne.mp3"/>
     <source src="media/bluebrowne.ogg"/>
     <source src="media/georgia.mp3"/>
     <source src="media/georgia.ogg"/>
   </audio>
</div>

Then include bbplayer.js:

<script src="js/bbplayer.js"></script>

See bbplayer.html for an example.