Invisible HTML5 / Flash audio player using jPlayer

I often see many people having problems getting jPlayer to play audio.  Whether they want it to play using HTML5 only, or how to get it to work using Flash, there is often confusion on why it’s not working.

I’m here to straighten that up.  First things first – what browsers support HTML5 audio – and what kind of audio?

HTML5 browsers and their supported audio file formats:

  • Firefox (OSX, Win): WEBMA, OGA
  • Safari (OSX, Win): MP3, M4A
  • Mobile Safari iOS4 (iPad, iPhone, iPod): MP3, M4A
  • Opera (OSX, Win): WEBMA, OGA
  • Chrome (OSX, Win): WEBMA, OGA, MP3, M4A
  • IE9 (Win): MP3, M4A (Can install the WebM codec.)

(Reference: http://www.jplayer.org/latest/developer-guide/#reference-html5-audio-format)

You may ask yourself why these browsers don’t all support MP3, the most popular format.  The truth is OGG is under GPL license while MP3 is not.  Many organizations claim ownership of patents relating to MP3 – therefore may sue anything they deem scrutinable.  More info here – http://en.wikipedia.org/wiki/MP3#Licensing_and_patent_issues

For this example, we’re going to create an invisible jPlayer player that first tries the HTML5 audio solution, and if that doesn’t work it will fall back to Flash.

We’re going to play a song called “Beer Beer Beer” by Youth of Britain.

We set up our directory structure like so:

	/jplayerTest
	/jplayerTest/index.php
	/jplayerTest/beer.ogg
	/jplayerTest/beer.mp3
	/jplayerTest/Jplayer.swf
	/jplayerTest/jquery.jplayer.min.js

Everything will go into our “jplayerTest” folder.  You may grab  the jquery.jplayer.min.js and Jplayer.swf files from jPlayer.org’s download page

 

My song was originally in mp3 format, and I used Audacity to convert it to .ogg.  (oga and ogg are the same thing, more information here: http://en.wikipedia.org/wiki/Ogg)

I named my index file index.php as I am using php on my server, but since we’re only working with javascript today this can be anything – index.html, Default.aspx, etc.

Now that we got our files sorted out, we’re going to start writing some HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="jquery.jplayer.min.js"></script>
	<script type="text/javascript">
		//script goes here
	</script>
	</head>
	<body>
		<div id="player"></div>
	</body>
</html>

 

 

Here we fetch the jQuery library from google, and we also are including the jquery.jplayer.min.js.
We also have created a div and gave it an id of “player”, this will hold our jPlayer instance.

Next is the script, but first a little prep:

To get HTML5 audio support working with all HTML5 browsers, it is often needed to provide more than 1 type of audio format.  For example, OGA and MP3.

oga: "http://www.vigrond.com/jplayerTest/beer.ogg",
mp3: "http://www.vigrond.com/jplayerTest/beer.mp3"

Note: relative and absolute paths both work

For older browsers that don’t support HTML5 audio, we can use jPlayer’s flash backup.  By default, jPlayer tries the HTML5 audio method first, and then falls back to Flash.  This can be changed via the solution option.

solution: "html, flash" //default setting

Now, finally to our script:

7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).ready(function(){
	$("#player").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				oga: "http://www.vigrond.com/jplayerTest/beer.ogg",
				mp3: "http://www.vigrond.com/jplayerTest/beer.mp3"
			}).jPlayer("play");
		},
		supplied: "oga, mp3",
		swfPath: "/jplayerTest",
		solution: "html,flash"
	});
});

Linguistically, this script says: When DOM is ready, initialize jPlayer in element #player with the following options:

  • ready:  When jPlayer is loaded, set its media to “Beer Beer Beer” by Youth of Britain, utilizing two formats: beer.ogg and beer.mp3.  Then play it.
  • supplied:  The media has been supplied with two formats:  oga and mp3.  This will allow jPlayer to try each in the HTML5 audio solution.  For example, OGA would work in Firefox but not Safari, but MP3 would work in Safari but not Firefox.
  • swfpath:  The folder in which Jplayer.swf is located.  (required for flash backup support)
  • solution:  Try HTML5 audio solution first, if that doesn’t work then try the Flash solution.  This can be re-engineered to HTML5 only with “html” or Flash only with “flash”.

For a demonstration of this example, see here: http://vigrond.com/jplayerTest/

2 thoughts on “Invisible HTML5 / Flash audio player using jPlayer”

  1. Rick

    I know this is an old post, but what’s the point of having a flash fallback if you have to provide an .ogg file? That doesn’t make sense. You should only need an mp3 file. The player should check to see if the browser supports it (html5). If not, it should fallback to flash. It’s really that simple.

Comments are closed.