WordPress Audio player WordPress video player with JQuery audioplayer.swf

Original address: http://justcoding.iteye.com/blog/545978

Wordpress Audio player with JQuery

How to use the 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.mp3" >
2. Audio:an Electronic Reason
3. </a>

Javascript

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

Java code

2. $ ('. Audio '). each (function () {
4. Audio_file = $ (this). attr (' href ');
8. $ (this). Flash (
10. {
12. SWF: ' flash/audioplayer.swf ',
14. Flashvars:
16. {
18. Soundfile:audio_file
20. }
22. }
24. );
26. });

Example 2:several Synchronized Players

View Demo

Javascript

<!--section "Example 2:several synchronized Players" [706-1488]-

Java code

2. Close other audio players
4. Called by audio Player if click on Play button
6. function Ap_stopall (player_id)
8. {
10. $ ('. Audio '). each (function () {
12. if ($ (this). attr (' href ')! = player_id)
14. {
16. $ (this). Find (' object ') [0].  SetVariable ("Closeplayer", 1);
18. }
20. Else
22. {
24. $ (this). Find (' object ') [0].  SetVariable ("Closeplayer", 0);
26. }
28. });
30. }
34. $ (document). Ready (function () {
36. $ ('. Audio '). each (function () {
40. Audio_file = $ (this). attr (' href ');
44. $ (this). Flash (
46. {
48. SWF: ' flash/audioplayer.swf ',
50. Flashvars:
52. {
54. playerID: "'" + audio_file + "'",
56. Soundfile:audio_file
58. }
60. }
62. );
64. });
66. });

Notes

How it works:

• Players is given an ID upon initialization
• When the click on Play button, the player calls with its ap_stopAll() ID as parameter
• Ap_stopall (): Stops all players and the one with this ID

• The ID is the ' audio file path, but anything else is possible.

<!--section "Notes" [1489-1786]--

Example 3:real World

View Demo

Html

Java code

2. <p>
4. <a class="audio" href="Audio/reason.mp3" id= "Reason" >
6. Audio:an Electronic Reason
8. </a>
10. </p>
14. <p>
16. <a class="audio" href="Audio/sunday.mp3" id= "Sunday" >
18. Audio:by Sunday Afternoon
20. </a>
22. </p>

Javascript

Java code

2. Close other audio players
4. Called by audio Player if click on Play button
6. function Ap_stopall (player_id)
8. {
10. $ ('. Audio_flash '). each (function () {
12. if ($ (this). attr (' id ')! = player_id)
14. {
16. $ (this). Find (' object ') [0].  SetVariable ("Closeplayer", 1);
18. }
20. Else
22. {
24. $ (this). Find (' object ') [0].  SetVariable ("Closeplayer", 0);
26. }
28. });
30. }
34. $ (document). Ready (function () {
38. $ ('. Audio '). each (function () {
40. Audio_file = $ (this). attr (' href ');
42. Audio_title = $ (this). Text ();
44. audio_id = $ (this). attr (' id ');
48. div = $ (' <div class= "Audio_flash" id= "' + audio_id + '" ></div> ');
50. $ (this). After (Div);
52. $ (this). After (Audio_title);
54. $ (this). Remove ();
56. Div.flash (
58. {
60. SWF: ' flash/audioplayer.swf ',
62. Flashvars:
64. {
66. Soundfile:audio_file,
68. playerID: "'" + audio_id + "'",
70. Quality: ' high ',
72. Lefticon: ' 0xFFFFFF ',
74. Righticon: ' 0xFFFFFF ',
76. LEFTBG: ' 0x357cce ',
78. RIGHTBG: ' 0x32bd63 ',
80. Rightbghover: ' 0x2c9d54 ',
82. Wmode: ' Transparent '
84. },
86. Height:
88. }
90. );
92. });
96. });

<!--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 customized with many options (bottom of the page).
• The default white space before and after the player are 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-]-

• Jquery_audio_player.zip (1.4 MB)
• Download number of times: 53

WordPress Audio player WordPress video player with JQuery audioplayer.swf