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

时间：2023-01-06 20:19:48

原文地址：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

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

  • 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

<!-- SECTION "Download" [3683-] -->

 

相关文章