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 code

1. <A class = "audio" href = "audio/reason.pdf">
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 code

1. $ ('. Audio'). Each (function (){
2. Audio_file = $ (this). ATTR ('href ');
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 code

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. }
17. $ (Document). Ready (function (){
18. $ ('. Audio'). Each (function (){
20. Audio_file = $ (this). ATTR ('href ');
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 CILSap_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 code

1. <P>
2. <A class = "audio" href = "audio/reason.pdf" id = "reason">
3. Audio: An electronic reason
4. </A>
5. </P>
7. <P>
8. <A class = "audio" href = "audio/sunday.pdf" 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 code

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. }
17. $ (Document). Ready (function (){
19. $ ('. Audio'). Each (function (){
20. Audio_file = $ (this). ATTR ('href ');
21. Audio_title = $ (this). Text ();
22. Audio_id = $ (this). ATTR ('id ');
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. });
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 customized options (bottom of the page ).
• The default white space before and after the player is already ced 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-] -->