WordPress Audio player WordPress video player with JQuery audioplayer.swf

Source: Internet
Author: User

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
    1. <a class= "audio" href="Audio/reason.mp3" >
    2. Audio:an Electronic Reason
    3. </a>

Javascript

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

Java code
  1. $ ('. Audio '). each (function () {
  2. Audio_file = $ (this). attr (' href ');
  3. $ (this). Flash (
  4. {
  5. SWF: ' flash/audioplayer.swf ',
  6. Flashvars:
  7. {
  8. Soundfile:audio_file
  9. }
  10. }
  11. );
  12. });
Example 2:several Synchronized Players

View Demo

Javascript

<!--section "Example 2:several synchronized Players" [706-1488]-

Java code
  1. Close other audio players
  2. Called by audio Player if 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. $ (document). Ready (function () {
  17. $ ('. Audio '). each (function () {
  18. Audio_file = $ (this). attr (' href ');
  19. $ (this). Flash (
  20. {
  21. SWF: ' flash/audioplayer.swf ',
  22. Flashvars:
  23. {
  24. playerID: "'" + audio_file + "'",
  25. Soundfile:audio_file
  26. }
  27. }
  28. );
  29. });
  30. });
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
  1. <p>
  2. <a class="audio" href="Audio/reason.mp3" id= "Reason" >
  3. Audio:an Electronic Reason
  4. </a>
  5. </p>
  6. <p>
  7. <a class="audio" href="Audio/sunday.mp3" id= "Sunday" >
  8. Audio:by Sunday Afternoon
  9. </a>
  10. </p>

Javascript

Java code
  1. Close other audio players
  2. Called by audio Player if 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. $ (document). Ready (function () {
  17. $ ('. Audio '). each (function () {
  18. Audio_file = $ (this). attr (' href ');
  19. Audio_title = $ (this). Text ();
  20. audio_id = $ (this). attr (' id ');
  21. div = $ (' <div class= "Audio_flash" id= "' + audio_id + '" ></div> ');
  22. $ (this). After (Div);
  23. $ (this). After (Audio_title);
  24. $ (this). Remove ();
  25. Div.flash (
  26. {
  27. SWF: ' flash/audioplayer.swf ',
  28. Flashvars:
  29. {
  30. Soundfile:audio_file,
  31. playerID: "'" + audio_id + "'",
  32. Quality: ' high ',
  33. Lefticon: ' 0xFFFFFF ',
  34. Righticon: ' 0xFFFFFF ',
  35. LEFTBG: ' 0x357cce ',
  36. RIGHTBG: ' 0x32bd63 ',
  37. Rightbghover: ' 0x2c9d54 ',
  38. Wmode: ' Transparent '
  39. },
  40. Height:
  41. }
  42. );
  43. });
  44. });

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.