Bootstrap-player

A Non-Intrusive HTML5 Audio Player Skin For Twitter Bootstrap

  Download  

bootstrap-player:

I know that this is not 100% pixel perfect accross all the browsers, but at least it gives some consistancy to the audio player. Please feel free to fork this and make improvements.

Below are two examples of the bootstrap-player, the first one has additonal data using the html5 data- attribute. The second is nothing but the audio tag.

Audio Player With Data

Airship Image From Myke Amend.

HTML Code

<audio controls
	data-info-album-art="http://farm5.staticflickr.com/4050/4353986539_ec89b52698_d.jpg"
	data-info-album-title="8874"
	data-info-artist="Billy Murray"
	data-info-title="Come, take a trip in my air-ship"
	data-info-label="Edison Gold Moulded Record"
	data-info-year="1905"
	data-info-att="University of California, Santa Barbara Library."
	data-info-att-link="http://cylinders.library.ucsb.edu/search.php?query=8874">
	<source src="/bootstrap-player/media/cusb-cyl2985d.ogg" type="audio/ogg" />
	<source src="/bootstrap-player/media/cusb-cyl2985d.mp3" type="audio/mpeg" />
	<a href="/bootstrap-player/media/cusb-cyl2985d.mp3">cusb_cyl2985d</a>
</audio>

Audio Player Alone

HTML Code

<audio controls>
	<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg" />
	<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg" />
	<a href="http://www.w3schools.com/html/horse.mp3">horse</a>
</audio>