Audio Player not loading when the content is loaded through Ajax, MediaElement.js no applied

I had the same problem. You need to reclassify the mediaelement style and script, like it is explained in this post. So just call this funtion, after your ajax call:

function enqueue_mediaelement(){
    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_script( 'wp-mediaelement' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

If you wanna add your own styles for specific pages (in the following example for page with ID ‘2’), I would recommend to additionally add your own stylesheet:

function enqueue_mediaelement(){
  if( is_page( '2' ) ) {
    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_style('my-audio-player', get_stylesheet_directory_uri() . '/audio-player-styles.css', array(), null );
  }else{
    wp_enqueue_style( 'wp-mediaelement' );
  }
  wp_enqueue_script('wp-mediaelement');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

Of course you could do the same with an individual script.

Also this article could be helpful.

Leave a Comment