A modern, minimalist html5 audio player.

View the Project on GitHub darrenderidder/bbplayer


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


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.


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>
     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"/>

Then include bbplayer.js:

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

See bbplayer.html for an example.


Why is it called bbplayer?

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

Does it have Flash fallback?


How do I stop looping?

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