Original address: http://justcoding.iteye.com/blog/545978
Wordpress Audio player with JQuery
How to use the 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 code
- <a class= "audio" href="Audio/reason.mp3" >
- Audio:an Electronic Reason
- </a>
Javascript
<!--section "Example 1:basic" [273-705]-
Java code
- $ ('. 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]-
Java code
- Close other audio players
- Called by audio Player if 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 is given an ID upon initialization
- When the click on Play button, the player calls with its
ap_stopAll()
ID as parameter
- Ap_stopall (): Stops all players and the one with this ID
- The ID is the ' audio file path, but anything else is possible.
<!--section "Notes" [1489-1786]--
Example 3:real World
View Demo
Html
Java code
- <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
Java code
- Close other audio players
- Called by audio Player if 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:
- }
- );
- });
- });
<!--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 customized with many options (bottom of the page).
- The default white space before and after the player are 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)
- Download number of times: 53
WordPress Audio player WordPress video player with JQuery audioplayer.swf