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

浏览数：29 / 时间：2015年06月09日

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

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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 java html src word com log http class 代码 java html src word com log http

相关文章

随机文章

您可能还喜欢

您可能还喜欢