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

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

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

 

Javascript

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

Java代码

1. $('.audio').each(function(){   
2.     audio_file = $(this).attr('href');    
3.     
4.     $(this).flash(   
5.         {   
6.             swf: 'flash/audioplayer.swf',   
7.             flashvars:   
8.             {   
9.                 soundFile: audio_file   
10.             }   
11.         }   
12.     );   
13. });  

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

1. // close other audio players   
2. // called by audio player when click on play button    
3. function ap_stopAll(player_id)   
4. {   
5.     $('.audio').each(function(){   
6.         if($(this).attr('href') != player_id)   
7.         {   
8.             $(this).find('object')[0].SetVariable("closePlayer", 1);   
9.         }   
10.         else    
11.         {   
12.             $(this).find('object')[0].SetVariable("closePlayer", 0);   
13.         }   
14.     });   
15. }    
16.     
17. $(document).ready(function() {   
18.     $('.audio').each(function(){   
19.     
20.         audio_file = $(this).attr('href');    
21.     
22.         $(this).flash(   
23.             {   
24.                 swf: 'flash/audioplayer.swf',   
25.                 flashvars:   
26.                 {   
27.                     playerID: "'" + audio_file + "'",   
28.                     soundFile: audio_file   
29.                 }   
30.             }   
31.         );   
32.     });   
33. });  

// 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代码

1. <p>   
2.     <a class="audio" href="audio/reason.mp3" id="reason">   
3.         Audio: An Electronic Reason   
4.     </a>                                                        
5. </p>   
6.     
7. <p>   
8.     <a class="audio" href="audio/sunday.mp3" id="sunday">   
9.         Audio: By Sunday Afternoon   
10.     </a>   
11. </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代码

1. // close other audio players   
2. // called by audio player when click on play button    
3. function ap_stopAll(player_id)   
4. {   
5.     $('.audio_flash').each(function(){   
6.         if($(this).attr('id') != player_id)   
7.         {   
8.             $(this).find('object')[0].SetVariable("closePlayer", 1);   
9.         }   
10.         else    
11.         {   
12.             $(this).find('object')[0].SetVariable("closePlayer", 0);   
13.         }   
14.     });   
15. }   
16.     
17. $(document).ready(function() {   
18.     
19.     $('.audio').each(function() {   
20.         audio_file = $(this).attr('href');    
21.         audio_title = $(this).text();   
22.         audio_id = $(this).attr('id');   
23.     
24.         div = $('<div class="audio_flash" id="' + audio_id + '"></div>');          
25.         $(this).after(div);   
26.         $(this).after(audio_title);   
27.         $(this).remove();   
28.         div.flash(   
29.             {   
30.                 swf: 'flash/audioplayer.swf',   
31.                 flashvars:   
32.                 {   
33.                     soundFile: audio_file,   
34.                     playerID: "'" + audio_id + "'",   
35.                     quality: 'high',   
36.                     lefticon: '0xFFFFFF',   
37.                     righticon: '0xFFFFFF',   
38.                     leftbg: '0x357CCE',   
39.                     rightbg: '0x32BD63',   
40.                     rightbghover: '0x2C9D54',   
41.                     wmode: 'transparent'  
42.                 },   
43.                 height: 50  
44.             }   
45.         );   
46.     });   
47.     
48. });  

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