HTML5 Audio & Video for jQuery

jPlayer 0.2.2 beta Demos

jPlayer as a stylish mp3 player

In this demo jPlayer is combined with HTML and CSS to create a stylish mp3 player.

You can easily customise the way it looks and make it fit your pages colours and style.

jPlayer as a stylish mp3 and playlist player

This demo combines jPlayer with some javascript code to add a playlist functionality to the mp3 player.

HTML and CSS have been used to create a stylish mp3 player with an interactive playlist.

Multi instanced player

In this demo jPlayer is instanced twice on the page, demonstrating how multiple instances of jPlayer may be used on the same page.

Using a technique such as this, the 2nd instance could be hidden from view and an advertisement automatically played when the song finishes.

Text based player with track switching

In this demo jPlayer is used to create a simple text mp3 player.

Text based player with track switching using custom code

In this demo jPlayer is used to create a simple text mp3 player, with fade effects on buttons.

This example demonstrates the flexibility of jPlayer to facilitate the writing of custom code to control every aspect of music or sound playback.

Text Based player with progress bar

In this demo jPlayer is used to create a simple text mp3 player with progress bars.

This example demonstrates the flexibility of jPlayer to facilitate the writing of custom code to control every aspect of music or sound playback.

ThemeRoller Version

This demo uses jQueryUI ThemeRoller widgets, allowing developers to easily customise the look and feel by rolling their own theme.

We have used the Slider widget for volume and playhead, Progressbar for play progress and Framework Icons for buttons.

jQueryUI ThemeRoller