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

Question

When I load the content using ajax it doesn't apply MediaElements.js to my audio player, so the audio isn't display. I think this is because the MediaElement.js is loaded with wp-footer(), and this new audio is added to the DOM after, and it's not recognized for MediaElement.js.

The same happend with local videos.

How can I resolve this?

Answer 1

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.