jQuery audio player plugin

jPlayer 1.2.0 Demos

jPlayer as a stylish audio player

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

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

This demo will use OGG files instead of MP3 files if you are using an HTML5 browser that supports OGG format.

Demo variants: {customCssIds:true} : {oggSupport:false} : {nativeSupport:false}

jPlayer as a stylish audio and playlist player

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

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

This demo will use OGG files instead of MP3 files if you are using an HTML5 browser that supports OGG format.

Demo variants: {oggSupport:false} : {nativeSupport:false} : With links to download MP3 files

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.

Both jPlayer instances will use OGG files instead of MP3 files if you are using an HTML5 browser that supports OGG format.

Warning: Multiple instances causes problems on the iPad.

Demo variants: One with {nativeSupport:false}

Text based player with track switching

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

Text based player with track switching using custom code

In this demo jPlayer is used to create a simple text audio 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 audio 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

jPlayer using Audio Streams

This simple demo shows jPlayer using an audio stream.

While we show this demo here, be aware that some browsers cannot play audio streams natively using HTML5. ie., using {nativeSupport:true} with streams will fails on some browsers. See HTML5 Audio Streams for more information.

Demo variants: {oggSupport:false} : {nativeSupport:false}

Also by Happyworm

Collaborate

• jPlayer on GitHub

jQuery JavaScript Library

• jQuery Website
• jQuery Documentation
• jPlayer on jQuery website

ActionScript 2 Compiler

• MTASC