Wordpress audio player with jQuery

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

View demo

HTML

Java代码  

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

Javascript

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

View demo

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

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  

Java代码  

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

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