Friday, June 25, 2010

Simple Player - A very simple HTML5 audio player plugin for jQuery

What is Simple Player

Simple Player is a jQuery plugin that allows web developers to control audio files on their webpage. Supports style up via CSS. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin.



I wrote this simple player plugin to replace the traditional flash player. There is no need to use flash (load flash plugin consumes much more memory extra) in some cases if you want to play a simple audio file.

Usage

The jquery.simpleplayer.min.js file should be added to the head section of the HTML file after the jQuery JavaScript file. Below is how to include the JavaScript file using an absolute path, relative to the server root.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="/jquery.simpleplayer.min.js"></script>
</head>


Then you should include the simpleplayer.css into your html.

<link rel="stylesheet" href="simpleplayer.css" type="text/css">


The audio tag in your code looks like:

<audio class="player" src="path_to_your_audio_file">  
  Your browser does not support the <code>audio</code> element.  
</audio>


Final step we need some javascript to load our simple player

<script type="text/javascript">
    $(document).ready(function() {
        var settings = {
            progressbarWidth: '200px',
            progressbarHeight: '5px',
            progressbarColor: '#22ccff',
            progressbarBGColor: '#eeeeee',
            defaultVolume: 0.8
        };
        $(".player").player(settings);
    });
</script>


Simple Player Options

  • progressbarWidth: the width of the progressbar
  • progressbarHeight: the height of the progressbar
  • progressbarColor: color of the progressbar
  • progressbarBGColor: background color of the progressbar
  • defaultVolume: volume as default

Latest Release


Collaborate


TODO List:

  • Video Support
  • Volume Adjust
  • More Control of Media
  • Theme
  • A befault html5 & css 3 demo page
  • ...

Simple Player jQuery Plugin Licensed under the MIT


Enjoy. Let me know if you like this simple player. @yuanhao

27 comments:

Mr.Shin said...

type mp3 not working :(

wong said...

Mr.Shin, I think you mean in FireFox? There are problem with mp3 and FireFox (licensing, as mp3 is not open source or so they said). Try to convert to OGG... I heard that .m4a works too.

Admin said...

Is it possible to hide the player and make it autostart?

I am working on a monitoring system, and often ones forgets to look at the visual indicators. A "beep" from time to time (based on certain flags) would improve a lot the user experience (and software usefulness).

BiggestFan said...

Is there anyway you can show us the css that can be used to style this player? It would be nice if there was a demo and more ways to customize this player and more ways to handle the media and video support. Volume control. I guess basically everything on your to-do list :P

BiggestFan said...

Being able to customize the player more I really want to change the background color have a volume or maybe even equalizer.

BiggestFan said...

Opps I meant background color of the player itself and have volume adjustment options or change look of that when you implement and possibly an equalizer

Maui Web Designer said...

Hi, great script thank you. I am wondering if it possible to have multiple instances on a page where when the next audio player is clicked the first one will stop playing automatically. Thank you.

Jay said...

@Admin

check the audio tag in your source code. The attribute "autoplay" should not be present.
http://www.w3schools.com/html5/att_audio_autoplay.asp

Jay said...

@BiggestFan You can customize it now if u learn some CSS stuff ; )

and equalizer will not be on the roadmap, it's not SIMPLE :D

d-bt said...

Hi, I´ve been trying to add some markers showing how long each track is in numbers as well as showing the progress in numbers, but I haven´t been too successful. Any ideas? Excellt plugin otherwise!

Handycam said...

Is there a way to parameterize the sound file name, so that I could have a combobox of multiple files, and the user picks/clicks one that file plays?

in other words, a list of files and one player, pass the filename clicked on to the player?

Elena said...

HI there Jay,
this is a great plugin. I have one question though, I need the player to start autoplay... but it only works if I remove class="player" from ... but that makes the player invisible. Anyway that it could start automatically AND keep the controls?

frankcohen said...

How about a couple of examples so we can try it out before we decide to use it?

plop said...
This comment has been removed by the author.
plop said...
This comment has been removed by the author.
plop said...

Jay,

I can´t make it work the "autoplay" attribute

I have this in my audio tag :

audio class="player" src="music/music.mp3" preload="auto" autoplay="autoplay"

But the autoplay only works in Safari..
if i remove the "player" class, the autoplay works in all browsers

Thanks

windowsphone7developement said...

Buying and taking that plugin and integrating it into WP is really good for beginers . I would just like to share with everyone tat html5 audio player were really works well.

getting-help-making-html5-site said...

Hi, this might be a really newbie question, but with this player, would you be able to play/pause, and also drag/click on the progress bar to navigate through the audio track?

i'm also wondering if it would be a simple task or not to change the rounded edges of the player's outline to square edges, or would this involve something a bit clever?

getting-help-making-html5-site said...

This might be a real newbie question, but with this player, could you play/pause, and also click on the progress bar to navigate through the track? That would be my ideal scenario. Well actually, ideal scenario would be play button on the right hand side but i'll live without that if need be.

I'm also wondering if it would be much of a hassle to change the rounded corners of the player's profile to make them square edges?

for me, play/pause, and click to navigate on the progress bar are the perfect basics.

Maria Antonietta Usai said...

@Admin @plop The autoplay is not expected in this script but you can get around the problem adding this simple code in the document ready ;)

$('.simpleplayer-play-control').trigger('click');

fleep said...

what if the browser doesn't support html5?

fleep said...

what if the browser doesn't support html5?

cris said...

hi

how can i make the player work on iPad (Mobile Safari)
any hints would be appreciated

thanks

cris

Jay said...

@cris

you can get the latest code on github. :)

paul fregeai said...

just got one question, what is the code for having mp3 AND ogg for one player because with just one of them it works on safari but not on firefox. hope you see what I mean…

by the way, thank you for this player, very simple, elegant…

yazmin villarreal said...

It's doesn't works in IE9? in my browser IE9 doesn't works, what can i do?

Flex Sin said...

Nice article, it really helped to create a nice pdf invoice. html5