How can I list URLs of all audio files within my media gallery?

Question

I have a music player in my theme that generates its playlist from a javascript file that looks like this

var myPlaylist = [
     {
        mp3:'track url goes here',
        title:'title here',
        artist:'artist',
    }
    {
        mp3:'track url goes here',
        title:'title here',
        artist:'artist',
    } 
etc...

];

How can I query the media library so it will echo the track url, title text and maybe an existing audio parameter like "description" for the artist value?

I know enough about php to put them in the right places once they're queried, I just needto know how to pull them from the wp database!

Answer 1

Welcome to WPSE marctain!

Edit There are some critiques on using the guid but no one of the commentators managed to edit this answer to a better one, so I'll do it.

Yes, using guid is a bad idea in the long run, I knew that and I should have pointed that out, I didn't, it was a mistake. I'm sorry, it was a quick and dirty answer.

In my original answer, I would have made usage of wp_get_attachment_url to get the correct url in any case. This adds an extra query, but it is safe to use.

$args = array
    (
        'post_type' => 'attachment',
        'post_mime_type' => 'audio',
        'numberposts' => -1
    );
 $audiofiles = get_posts($args);

 foreach ($audiofiles as $file)
 {
      $url = wp_get_attachment_url($file->ID);
      echo $url; // url
      echo file->post_title; //title
      echo file->post_content; // description
 }

Answer 2

One step further: Use localize to process from php and access in js

Here's an example that allows you to access & modify your tracklist straight from inside your php files. The additional benefit from this solution is that you can now modify stuff using jQuery.ajax functions ¹⁾.

 function load_init_tracks()
 {
      $args = array
      (
        'post_type' => 'attachment',
        'post_mime_type' => 'audio',
        'numberposts' => -1
      );
      $audiofiles = get_posts($args);

      $result = array();
       foreach ( $audiofiles as $file )
      {
           $result['mp3'] = wp_get_attachment_url( $file->ID ); // url
           $result['title'] = $file->post_title //title
           $result['artist'] = $file->post_content // description
      }
      // $result now contains all tracks as multi dimensional array
      return $result;
 }

 function load_track_scripts()
 {
     // register your script, enqueue it and then add localize the result to access it inside your js file:
     wp_register_script( 'mp3tracks', get_stylesheet_directory().'js/your_js_filename.js', array( 'jquery' ), 0, true );
     wp_enqueue_script( 'mp3tracks' );
     wp_localize_script( 
         'mp3tracks',
     'track_list_object',
     array( 
         'ajaxurl'  => admin_url( 'admin-ajax.php' )
        ,'nonce'    => wp_create_nonce( 'mp3_nonce_value' ) 
        ,'action'   => "mp3tracks"
             ,'tracks'  => load_init_tracks()
  );
     // Hook it to some ajax callback (for public and logged in users):
     add_action( 'wp_ajax_nopriv_mp3tracks', 'mp3tracks_cb' );
    add_action( 'wp_ajax_nopriv_mp3tracks', 'mp3tracks_cb' );
 }
 add_action( 'init', 'load_track_scripts' );

 // Now call the function that processes the 
 function mp3tracks_cb()
 {
      check_ajax_referer( 'mp3_nonce_value', 'nonce' );

      // This is what the data you can process with the ajax response
      $data = $_POST;
      # @todo validate your input: esc_attr(), strip_tags(), etc.

    $response = json_encode( array(
         'tracks' => $data
    ) );

    header( "Content-Type: application/json" );
    echo $response;
    exit;
 }

You then can access your result inside your javascript file from track_list_object.data. This ↑ also allows you to process stuff via ajax inside the function.

Just process your stuff during something like:

// Inside theme_root/js/your_js_filename.js
jQuery( document ).on(
    "pageinit"
    ,function( e, data )
    {
        // do stuff... take a look at your "console"-tab in the chrome/IE dev bar or with FF Firebug
        console.log( track_list_object );
    }
);

---

Notes

^{1) You don't have to do this, but it's easy and allows you to use ajax in case you want to modify your playlists on the fly.}