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

  • 相关阅读:
    Spring源码情操陶冶-自定义节点的解析
    SpringMVC源码情操陶冶-DispatcherServlet
    springcloud config配置读取优先级
    Maven-常用插件
    springcloud情操陶冶-springcloud config server(三)
    springcloud情操陶冶-springcloud config server(二)
    springcloud情操陶冶-bootstrapContext(三)
    springcloud情操陶冶-springcloud config server(一)
    springcloud情操陶冶-bootstrapContext(二)
    springcloud情操陶冶-bootstrapContext(一)
  • 原文地址：https://www.cnblogs.com/scgw/p/1631131.html
Copyright © 2020-2023  润新知