Wordpress audio player with jQuery

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

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
			}
		}
	);
});

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
				}
			}
		);
	});
});

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.

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
			}
		);
	});
 
});

• 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 all examples (ZIP, 1.4 MB)