0

I'm trying to get a post's mp3 attachments working with the jplayer plugin (with playlist addon). I have it working for a set number of attachments, but am failing to find a dynamic solution for any number of attachments.

Currently, the mp3 attachment urls and titles are fetched and added as attributes to the '.jp-playlist' div. This is so the data can be accessed via jquery to set up a playlist for the jplayer. (this may not be the most elegant solution, so any feedback on a better method appreciated)

Code to setup jPlayer in single.php:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
  <div class="jp-type-playlist">
    <div class="jp-gui jp-interface">
      <ul class="jp-controls">
        <li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
        <li><a href="#" class="jp-play" tabindex="1">play</a></li>
        <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
        <li><a href="#" class="jp-next" tabindex="1">next</a></li>
      </ul>                         
    </div>
    <div class="jp-playlist" data-track-1="exampleurl1.mp3" data-title-1="Track 1" data-track-2="exampleurl2.mp3" data-title-2="Track 2" data-track-3="exampleurl3.mp3" data-title-3="Track 3" >
      <ul>
        <li></li>
      </ul>
    </div> <!-- .jp-playlist -->
  </div> <!-- .jp-type-playlist -->
</div> <!-- #jp_container_1 -->

jQuery code to initialise jPlayer and set up the playlist:

jQuery(document).ready(function($) {

  var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
    }, [
      { 
        title: $(".jp-playlist").attr("data-title-1"), 
        mp3: $(".jp-playlist").attr("data-track-1") 
      },
      { 
        title: $(".jp-playlist").attr("data-title-2"), 
        mp3: $(".jp-playlist").attr("data-track-2") 
      },
      { 
        title: $(".jp-playlist").attr("data-title-3"), 
        mp3: $(".jp-playlist").attr("data-track-3") 
      }
    ], {
    swfPath: "Jplayer.swf",
    supplied: "mp3"
  });
});                                      

This works fine if there are three mp3 attachments, but I need to make it adaptable for any number of attachments. I guess the solution is to have a javascript loop to get all the data-track/title attributes, and outputting them into an array for the playlist object, but I'm not having much success. Any help much appreciated!

1

Have a look at wp_localize_script for passing php data to javascript. A pseudo-code example:

$tracks = array();

foreach( $mp3_attachments as $mp3_attachment ):
    $tracks[] = array(
        'mp3' => $mp3_attachment['filename'],
        'title' => $mp3_attachment['title']
    );
endforeach;

$wpa_track_data = array( 'tracks' => $tracks );

wp_enqueue_script( 'wpa_script', get_template_directory_uri() . '/js/yourscript.js' );
wp_localize_script( 'wpa_script', 'wpa_data', $wpa_track_data );

Then in your js wpa_data.tracks will contain your array of mp3s and titles.

| improve this answer | |
  • Thanks Milo. I had tried using wp_localize_script previously, but hadn't managed to get it to work and assumed it was because it doesn't support multi-dimensional arrays. However, you inspired me to give it another go and IT WORKS NOW!!! – George Apr 5 '13 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.