Wordpress 音频播放器 Wordpress audio player with jQuery

Wordpress audio player with jQuery

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

<!-- SECTION "Wordpress audio player with jQuery" [1-272] -->

Example 1: basic

View demo

HTML

Java代码


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

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

Javascript

<!-- SECTION "Example 1: basic" [273-705] -->

Java代码


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

$('.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

<!-- SECTION "Example 2: several synchronized players" [706-1488] -->

Java代码


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

// 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.

<!-- SECTION "Notes" [1489-1786] -->

Example 3: real world

View demo

HTML

Java代码


<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>

<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

Java代码


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

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

});

<!-- SECTION "Example 3: real world" [1787-3238] -->

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)

<!-- SECTION "Notes" [3239-3682] -->

Download

Download all examples (ZIP, 1.4 MB)



<!-- SECTION "Download" [3683-] -->