2

I'm converting a HTML and CSS template into a wordpress theme, When I open the HTMl and CSS file the audio player works normally as it should, but when I convert into a wordpress theme it doesn't work, I have tried to enqeue the mediaelement-and-player.min.js like this

function music_theme_js() {

    wp_enqueue_script( 'mep_js' , get_template_directory_uri() . '/js/mediaelement-and-player.min.js' , array( 'jquery' ) , '', true);

still nothing shows. Please Help!

It shows up normal when opened through a normal HTML and CSS file

But breaks when I convert to a wordpress theme Here is the wp_enqueue_script

<?php

function flexing_theme_styles() {

      /* theme's primary style.css file */
  wp_enqueue_style( 'main-css' , get_stylesheet_uri() );


  wp_enqueue_style( 'bootstrap_css' , get_template_directory_uri() . '/css/bootstrap.css' );

  wp_enqueue_style( 'font-awesome_css' , get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' );

  wp_enqueue_style( 'main_css' , get_template_directory_uri() . '/css/main.css' );



}


add_action( 'wp_enqueue_scripts' , 'flexing_theme_styles' );


function flexing_theme_js() {

    wp_enqueue_script( 'bootstrap_js' , get_template_directory_uri() . '/js/bootstrap.js' , array( 'jquery' ) , '', true);

    wp_enqueue_script( 'jssor.slider_js' , get_template_directory_uri() . '/js/jssor.slider-21.1.6.mini.js' , array( 'jquery' ) , '', true);

    wp_enqueue_script( 'mediaelement_js' , get_template_directory_uri() . '/js/mediaelement-and-player.min.js' , array( 'jquery' ) , '', true);

    wp_enqueue_script( 'main_js' , get_template_directory_uri() . '/js/main.js' , array( 'jquery' ) , '', true);

}


add_action( 'wp_enqueue_scripts' , 'flexing_theme_js' );

?>
5
  • 3
    Some questions: Does the file get included on the frontend? ( Look at the source, even if the file's included but doesn't do anything it's still necessary info ). Are there errors in your browser dev tools console? Do you hook the music_theme_js function on to the right hook? ( that part of your code is missing in your question, along with the rest of the music_theme_js function ). Finally, when you say nothing shows, do you mean that the audio player doesn't show, or that nothing at all shows and it's a blank white page? Please update your question with the answer to all these questions
    – Tom J Nowell
    Commented Dec 19, 2016 at 15:22
  • Yes the files are included on the frontend, It shows up when I view the page source, I used <?php wp_footer(); ?> to include the js files in the footer. The audio player is picking up the styles when I convert it to a wordpress theme, but displays the default browser player. I will update my questionwith pictures. Thank you.
    – Jay
    Commented Dec 19, 2016 at 18:44
  • Give us your enqueue code. I mean where you have called wp_enqueue_script, the full block of code. @Jay
    – CodeMascot
    Commented Dec 20, 2016 at 6:33
  • @ the_dramatist I updated the question.
    – Jay
    Commented Dec 20, 2016 at 7:04
  • On which file you've put the initiation code of MediaElement.js ? @Jay
    – CodeMascot
    Commented Dec 20, 2016 at 7:36

1 Answer 1

1

You need to init the MediaElement.js by doing-

For video or audio tag-

<script>
// using jQuery
$('video,audio').mediaelementplayer(/* Options */);
</script>

And for custom div-

<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player',/* Options */);
// ... more code ...
player.pause();
player.setSrc('mynewfile.mp4');
player.play();
</script>

Just have a look on MediaElement.js wesite.

And it would be better to write the main_js enqueue line like below-

wp_enqueue_script( 'main_js' , get_template_directory_uri() . '/js/main.js' , array( 'mediaelement_js', 'jquery' ) , '', true);

Cause as far as I understood you've put you custom JavaScript code in this file. So better enqueue it after MediaElement.js.

And in your HTML file it is working cause I think they have called it in HTML file inside <script></script> tag. And in your theme it is not working cause the init of MediaElement.js is happening before the MediaElement.js is loaded. So better move this code to you custom script file (like main.js) and call it after MediaElement.js.

Hope that helps.

1
  • I moved the init file into main.js, it still wasn't working had to Disable cache then refreshed to get it right. Thanks alot @ the_dramatist.
    – Jay
    Commented Dec 20, 2016 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.