bbplayer

A modern, minimalist html5 audio player.

View the Project on GitHub darrenderidder/bbplayer

Demo

--:--   --:--
Brian Browne Trio - Blue Browne


About

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

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.

FAQ

Why is it called bbplayer?

I made it for my piano teacher's web site, brianbrowne.com.

Does it have Flash fallback?

Nope.

How do I stop looping?

Change var repeat = false; to true in bbplayer.js.