0

Alright so recently I purchased an audio player called "Liner" and I am working with it now converting it into a WordPress plugin but the one thing I am having the most problems with is the fact that the tracks need to be manually added..

Here's a snippet of my JS.

<script>
    jQuery(function($) {
        $('body').linerPlayer({
            firstPlaying: 0,
            autoplay: true,
            shuffle: false,
            //veryThin: true,
            slideAlbumsName: true,
            nowplaying2title: true,
            roundedCorners: true,
            //accentColor:"#cc181e",    //008DDE            
            pluginPath: "/canyon/liner/", // <<< IMPORTANT! - Change this to your path to the plugin folder
            playlist: [ //♩ ♪ ☊ ♫ ♬ //
                {mp3:"song/songname.mp3", title:"song title", artist:"song artist", album:"name", cover:"song/cover.png"},
            ]
        });

    });
</script>

I am wondering if there is anyway that I could write to this JS to fill out the song MP3 and then making the title as example

<?php the_title(); ?>

And the artist as the

<?php the_tags(); ?>

But with out me manually having to add anything to the player? How would I start on doing this.. just some ideas will help me a lot because I am really stuck right now.

  • search around for wp_enqueue_script for adding your js file, and wp_localize_script for passing data from php to your script. – Milo Dec 2 '14 at 3:47
  • @milo I have taken a look at both of the functions you have provided and I still don't see how it would prevent me from manually having to add the audio.. I assume I would need to make a short code which would write another line into the JS file but I don't think that's it at all.. – Clark Dec 2 '14 at 4:00
  • you're not writing anything to a js file, your js file would be updated to reference the data object that you create after you enqueue the script. you populate the data object with whatever data you want to pass from php to javascript. – Milo Dec 2 '14 at 4:15
0

Here's a quick example showing how you would pass php data to your script.

First, we hook our function to the wp_enqueue_scripts action. Inside, we enqueue the script that contains the player and initialization code (this is probably two separate files, but I've condensed it to a single file in this example). Next, we call wp_localize_script and set some data we want available in our script.

function wpd_test_localize_script() {
    if( is_single() ){
        global $post;
        wp_enqueue_script(
            'test_script',
            get_template_directory_uri() . '/script.js', // or plugins_url() if this is plugin, not theme
            array( 'jquery' ),
            null,
            true
        );
        wp_localize_script(
            'test_script',
            'test_script_data',
            array(
                'title' => $post->post_title,
                'file' => 'hello.mp3'
            )
        );
    }
}
add_action( 'wp_enqueue_scripts', 'wpd_test_localize_script' );

Next, we look at the script.js file we enqueued above, and we can see here how to access the data we passed to it via wp_localize_script:

(function($){
    $(window).load(function(){
        alert( test_script_data.title );
    });
})(jQuery);

test_script_data is the object we created with wp_localize_script. If we load a single post page, the above code will pop an alert dialog with the current post's title.

If we look in our page source, we can see the script tag WordPress created which contains our data:

<script type='text/javascript'>
/* <![CDATA[ */
var test_script_data = {"title":"Some post title","file":"hello.mp3"};
/* ]]> */
</script>

We can pass an array of data as we do above, or we can nest any number of arrays to create multi-dimensional data if necessary (like multiple tracks, each with title, file, etc.).

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.