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

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

 

Javascript

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

$('.audio').each(function(){
    audio_file = $(this).attr('href');

    $(this).flash(
        {
            swf: 'flash/audioplayer.swf',
            flashvars:
            {
                soundFile: audio_file
            }
        }
    );
});

 

Example 2: several synchronized players

View demo

Javascript

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

// close other audio players
// called by audio player when click on play button
function ap_stopAll(player_id)
{
    $('.audio').each(function(){
        if($(this).attr('href') != player_id)
        {
            $(this).find('object')[0].SetVariable("closePlayer", 1);
        }
        else
        {
            $(this).find('object')[0].SetVariable("closePlayer", 0);
        }
    });
}

$(document).ready(function() {
    $('.audio').each(function(){

        audio_file = $(this).attr('href');

        $(this).flash(
            {
                swf: 'flash/audioplayer.swf',
                flashvars:
                {
                    playerID: "'" + audio_file + "'",
                    soundFile: audio_file
                }
            }
        );
    });
});

 

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  

<p>
    <a class="audio" href="audio/reason.mp3" id="reason">
        Audio: An Electronic Reason
    </a>
</p>

<p>
    <a class="audio" href="audio/sunday.mp3" id="sunday">
        Audio: By Sunday Afternoon
    </a>
</p>

 

Javascript

// close other audio players
// called by audio player when click on play button
function ap_stopAll(player_id)
{
    $('.audio_flash').each(function(){
        if($(this).attr('id') != player_id)
        {
            $(this).find('object')[0].SetVariable("closePlayer", 1);
        }
        else
        {
            $(this).find('object')[0].SetVariable("closePlayer", 0);
        }
    });
}

$(document).ready(function() {

    $('.audio').each(function() {
        audio_file = $(this).attr('href');
        audio_title = $(this).text();
        audio_id = $(this).attr('id');

        div = $('<div class="audio_flash" id="' + audio_id + '"></div>');
        $(this).after(div);
        $(this).after(audio_title);
        $(this).remove();
        div.flash(
            {
                swf: 'flash/audioplayer.swf',
                flashvars:
                {
                    soundFile: audio_file,
                    playerID: "'" + audio_id + "'",
                    quality: 'high',
                    lefticon: '0xFFFFFF',
                    righticon: '0xFFFFFF',
                    leftbg: '0x357CCE',
                    rightbg: '0x32BD63',
                    rightbghover: '0x2C9D54',
                    wmode: 'transparent'
                },
                height: 50
            }
        );
    });

});

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