Wordpress 音频播放器 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代码 复制代码
  1. <a class="audio" href="audio/reason.mp3">   
  2.     Audio: An Electronic Reason   
  3. </a>  
 

Javascript

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

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

Example 2: several synchronized players

View demo

Javascript

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

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

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  

Java代码 复制代码
  1. <p>   
  2.     <a class="audio" href="audio/reason.mp3" id="reason">   
  3.         Audio: An Electronic Reason   
  4.     </a>                                                        
  5. </p>   
  6.     
  7. <p>   
  8.     <a class="audio" href="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. });  

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/scgw/p/1631131.html