A sleek HTML5 audio player with playlists.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css better responsive css Apr 18, 2014
images Rename img directory Feb 28, 2013
js Make use of declared var. Nov 7, 2017
.gitignore update .gitignore Apr 18, 2014
LICENSE.txt Rename LICENSE to LICENSE.txt May 26, 2014
README.md Update README.md Sep 25, 2018
bbplayer.html better responsive css Apr 18, 2014
index.html add google analytics tracking Apr 8, 2014

README.md

DeepScan grade

bbplayer

A Modern, Minimalist HTML5 Audio Player

bbplayer

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://darrenderidder.github.com/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>.