bbplayer

A Modern, Minimalist HTML5 Audio Player

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 several bbplayers on a page that 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 and bb-trackTime. Inlude the HTML5 audio element; bbplayer takes care of the rest.

Include your choice of stylesheet.

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

Add HTML elements for bbplayer.

<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>
    <source src="media/x.mp3"/>
    <source src="media/x.ogg"/>
    <source src="media/y.mp3"/>
    <source src="media/y.ogg"/>
  </audio>
</div>

To automatically start playing on load, use <audio autoplay>.

Then include bbplayer.js:

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

See bbplayer.html or visit http://73rhodes.github.io/bbplayer 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 enable continual looping?

Use <audio loop>.

How do I enable autoplay?

Use <audio autoplay>.