An HTML5 Audio Player Skin For Twitter Bootstrap 3
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 48 commits ahead, 5 commits behind WilliamRandol:master.
Latest commit 4095b37 Jan 6, 2017


An HTML5 Audio Player Skin For Twitter Bootstrap 3


How to use

Clone or download this repo; then open the included index.html file:

  • with your browser to:
  • with your text editor to:
    • see all the css and js files you need to link to
    • see the <audio> tags in use

Styling caveat

Works best when the player is not enclosed in too narrow a container in your page otherwise the player controls can appear jumbled. Both the seek and volume sliders are hidden on narrow (xs) viewports. A good strategy is to start "mobile-first" as usual by enclosing your audio block in a row that uses all twelve grid colums of the page's outer container in an xs viewport. Then, on wider viewports, the player can occupy fewer of the page's grid columns. See the example row widths in index.html and the corresponding live demo.

Forked from William Randol's bootstrap-player
  • bootstrap-player is great for Bootstrap 2
  • All the functionality of William Randol's player is preserved
    (QUnit / FuncUnit test suite in progress 🌒)
  • bootstrap3_player updates the styling of bootstrap-player; has fewer dependencies; uses Bootstrap 3

For some info on the differences between bootstrap-player and bootstrap3_player, see here.

Screenshots and Live demo

See a live demo

  • Audio with no additional data

  • Audio with data - collapsed

  • Audio with data - expanded