Wordpress 音频播放器 Wordpress audio player with jQuery audioplayer.swf

原文地址：http://justcoding.iteye.com/blog/545978

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

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

Javascript

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

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

Example 2: several synchronized players

View demo

Javascript

<!-- SECTION "Example 2: several synchronized players" [706-1488] -->

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. $(document).ready(function() {
17. $('.audio').each(function(){
18. audio_file = $(this).attr('href');
19. $(this).flash(
20. {
21. swf: 'flash/audioplayer.swf',
22. flashvars:
23. {
24. playerID: "'" + audio_file + "'",
25. soundFile: audio_file
26. }
27. }
28. );
29. });
30. });

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

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

Javascript

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. $(document).ready(function() {
17. $('.audio').each(function() {
18. audio_file = $(this).attr('href');
19. audio_title = $(this).text();
20. audio_id = $(this).attr('id');
21. div = $('<div class="audio_flash" id="' + audio_id + '"></div>');
22. $(this).after(div);
23. $(this).after(audio_title);
24. $(this).remove();
25. div.flash(
26. {
27. swf: 'flash/audioplayer.swf',
28. flashvars:
29. {
30. soundFile: audio_file,
31. playerID: "'" + audio_id + "'",
32. quality: 'high',
33. lefticon: '0xFFFFFF',
34. righticon: '0xFFFFFF',
35. leftbg: '0x357CCE',
36. rightbg: '0x32BD63',
37. rightbghover: '0x2C9D54',
38. wmode: 'transparent'
39. },
40. height: 50
41. }
42. );
43. });
44. });

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

 

• jquery_audio_player.zip (1.4 MB)
• 下载次数: 53