Wordpress audio player with jQuery

How to use Wordpress audio player (standalone version) with jQuery and jQuery SWFObject (progressive enhancement).

Example 1: basic

View demo

HTML

<a class="audio" href="audio/reason.mp3">
	Audio: An Electronic Reason
</a>

Javascript

$('.audio').each(function(){
	audio_file = $(this).attr('href'); 
 
	$(this).flash(
		{
			swf: 'flash/audioplayer.swf',
			flashvars:
			{
				soundFile: audio_file
			}
		}
	);
});

Example 2: several synchronized players

View demo

Javascript

// close other audio players
// called by audio player when click on play button 
function ap_stopAll(player_id)
{
	$('.audio').each(function(){
		if($(this).attr('href') != player_id)
		{
			$(this).find('object')[0].SetVariable("closePlayer", 1);
		}
		else 
		{
			$(this).find('object')[0].SetVariable("closePlayer", 0);
		}
	});
} 
 
$(document).ready(function() {
	$('.audio').each(function(){
 
		audio_file = $(this).attr('href'); 
 
		$(this).flash(
			{
				swf: 'flash/audioplayer.swf',
				flashvars:
				{
				    playerID: "'" + audio_file + "'",
				    soundFile: audio_file
				}
			}
		);
	});
});

Notes

How it works:

  • players are given an id upon initialization
  • when click on play button, player calls ap_stopAll() with its id as parameter
  • ap_stopAll(): stops all players but the one with this id
  • the id here is the audio file path, but anything else is possible.

Example 3: real world

View demo

HTML

<p>
	<a class="audio" href="audio/reason.mp3" id="reason">
		Audio: An Electronic Reason
	</a>                                                     
</p>
 
<p>
	<a class="audio" href="audio/sunday.mp3" id="sunday">
		Audio: By Sunday Afternoon
	</a>
</p>

Javascript

// close other audio players
// called by audio player when click on play button 
function ap_stopAll(player_id)
{
	$('.audio_flash').each(function(){
		if($(this).attr('id') != player_id)
		{
			$(this).find('object')[0].SetVariable("closePlayer", 1);
		}
		else 
		{
			$(this).find('object')[0].SetVariable("closePlayer", 0);
		}
	});
}
 
$(document).ready(function() {
 
	$('.audio').each(function() {
		audio_file = $(this).attr('href'); 
		audio_title = $(this).text();
		audio_id = $(this).attr('id');
 
		div = $('<div class="audio_flash" id="' + audio_id + '"></div>');		
		$(this).after(div);
		$(this).after(audio_title);
		$(this).remove();
		div.flash(
			{
				swf: 'flash/audioplayer.swf',
				flashvars:
				{
					soundFile: audio_file,
					playerID: "'" + audio_id + "'",
					quality: 'high',
					lefticon: '0xFFFFFF',
					righticon: '0xFFFFFF',
					leftbg: '0x357CCE',
					rightbg: '0x32BD63',
					rightbghover: '0x2C9D54',
					wmode: 'transparent'
				},
				height: 50
			}
		);
	});
 
});

Notes

  • meaningful HTML: visitors without Javascript get a download link, otherwise it's replaced by plain text and the player

  • the appearance can be customized with many options (bottom of the page).
  • the default white space before and after the player is reduced by the “height” Flash parameter.
  • use of a custom id (set on the HTML link)

Download

Download all examples (ZIP, 1.4 MB)

Feedback

Hi, first of all, thanks for this work, was searching quite a time for a jquery based wp-audio-player! I'm now changing the setup of an actual project to the jqueryfied version but I'm running in some problems... 1. Before I had the height & width of the flash-container on 100%, when I do this now (in the jquery.swfobject or with js config in the script) the js breaks and flash isn't displayed...when I set the height to a number, it works...the width is still 100%...why? 2. How can I pass the "titles" flashvar...let's say I put the title I want to be displayed in the player as the text of the link i.e. audio_title...I tried different things (with and without " or ') but I didn't get it =/... here a part of my js... div.flash({ swf: 'path/to/wp-audio-player_v2.0b9.swf', height: 30, width: '100%', params: { quality: 'high', wmode: 'opaque', flashvars: { soundFile: audio_file, playerID: audio_id, titles: audio_title, animation: 'yes', autostart: 'no', buffer: '10', initialvolume: 100, loader: 'AA0000', remaining: 'yes', rightbghover: 'BE0000', track: 'F2F3F5', tracker: 'CC6666', transparentpagebg: 'yes' } } }); to say that this works so far...I just don't get the title inside the player... this is the html output
<object height="30" width="100%" data="assets/templates/capitalfm/flash/wp-audio-player_v2.0b9.swf" type="application/x-shockwave-flash"> </object>
this passing everything in one string seems a bit messy to me =)...and things like titles= Börsenbericht vom 06.11.2008 are not very promising *g*... when I echo the var audio_title, it doesn't have such in front of it, what is that? thanks in advance for your answer! regards, LuK
LuK
Dec 13, 2009
#1
OK, tried to narrow down where the problem could be...seems not to be the code, it's the new .swf I'm using from the actual archive of the worpress audio player (2.0b9), when I just change the audioplayer.swf in your example it doesn't close anymore... what version did you use? also from the jquery.swfobject, which version is in your package (actual is 1.0.9) and also the jquery is a pretty old one...don't know if that matters btw. what changed with a little help from your side I would even make an updated package and send it to you to upload here...
LuK
Dec 16, 2009
#2
hey,
sorry for my bad english.
i've got a question to the audio player: i wanna load an external javascript function, if the user clicks "play" in player. where i must insert the call for the function?
helmut from munich
web_fuzzi
Mar 31, 2010
#3
background is not working, stays constantly white.
transparentpagebg, pagebg, bg does not change ...
dloop
Nov 2, 2010
#4
solution for background:

flashvars:
{
soundFile: audio_file,
playerID: "'" + audio_id + "'",
quality: 'high',
lefticon: '0xFFFFFF',
righticon: '0xFFFFFF',
leftbg: '0x357CCE',
rightbg: '0x32BD63',
rightbghover: '0x2C9D54',
},
height: 50,
wmode: 'transparent'

put wmode outside flashvars

dloop
Nov 2, 2010
#5
hello jerome,

thanks for this tutorial. i just tried to get the solo play function with multiple wordpressaudio players.

is there a difference between the player.swf and the audioplayer.swf?

i get very strange results when using some of the flashvars setting inside of example3.js. this is what i do:

{swf: 'flash/audioplayer.swf',
flashvars:
{
soundFile: audio_file,
playerID: "'" + audio_id + "'",
quality: 'high',
width: 290,
initialvolume: 100,
left: '000000',
lefticon: 'FFFFFF',
lefticonhover: 'FFFFFF',
righticon: '000000',
righticonhover: '000000',
leftbg: 'FFFFFF',
rightbg: 'FFFFFF',
leftbghover: 'FFFFFF',
rightbghover: 'FFFFFF',
volslider: 'FFFFFF',
bg: 'FFFFFF',
voltrack: 'FFFFFF',
border: 'FFFFFF',
noinfo: 'yes',
loader: '333333',
track: 'DADADA',
tracker: 'B0B0B0'
},
...


these settings works within the lattest wordpress-standalone-audioplayer. what iam doing wrong?
here is example3 on my page:
www.ypsilonht.com/example3.html

thanks for your help,
greetings johannes
johannes
Feb 18, 2011
#6
anyway to use this on blogger ?
i'd appreciate the help.
LGfaver
Feb 24, 2011
#7
Is there a way to play only a sample of the audio file? For example, if a song is 1:28 minutes, can the audio player play only 0:25 seconds? thank you.
JAnon
Oct 3, 2012
#8
How switch off the animation?
Patryk
Oct 28, 2012
#9
I've downloaded de files and in example2.html and example3.html both didn't stop the previous player when I selected the other but in this website both stop the other player when it is working.
Jose
Nov 29, 2012
#10