Wordpress Audio Player and SmoothState. What to call on callback to reload player on new pages?

Question

I'm using a Wordpress Audio Player with shortcode on the code in the "header.php" page.

I'm using also SmoothState (http://miguel-perez.github.io/smoothState.js/).

What function I have to call on "callback" to reload player on the new pages?

I'm enqueing js and css in functions.php like this:

wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-mediaelement' );

Answer 1

All that the wp_enqueue_script(); does is put a script into your page after checking for dependencies. It isn't going to reload the player for you on different pages. But, as long as you use this function correctly, your script should be loading on every page. Maybe your error is elsewhere?

From the WordPress documentation on wp_enqueue_script();:

Links a script file to the generated page at the right time according to the script dependencies, if the script has not been already included and if all the dependencies have been registered.

If Wordpress Audio Player has jQuery as a dependency (likely), your functions.php file should look like this:

function wpaudioscript() {
    // Parameters are name, path, dependency, version, loadinfooter
    // Better explanation here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
    wp_enqueue_script(
        'name-of-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' ),
        1.0.0,
        true
    );
}

add_action( 'wp_enqueue_scripts', 'wpaudioscript' );

Couple other notes:

• You should load your scripts in the footer of your application for better performance. Setting the fifth parameter of wp_enqueue_script to true, as in the example above, will do that for you.
• Many people typically place custom functionality like this into their functions.php file but I find it much cleaner to put all of your own modifications into a custom module. Smashing Mag a nice rundown of how to do this.