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
HTML
- <a class="audio" href="audio/reason.mp3">
- Audio: An Electronic Reason
- </a>
Javascript
<!-- SECTION "Example 1: basic" [273-705] -->
- $('.audio').each(function(){
- audio_file = $(this).attr('href');
- $(this).flash(
- {
- swf: 'flash/audioplayer.swf',
- flashvars:
- {
- soundFile: audio_file
- }
- }
- );
- });
Example 2: several synchronized players
Javascript
<!-- SECTION "Example 2: several synchronized players" [706-1488] -->
- // 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
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
- }
- );
- });
- });
<!-- 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
<!-- SECTION "Download" [3683-] -->