Jplayer connected/bind to mediaelement

Question

I am trying to bind jplayer on my site to mediaelement player(wordpress) that plays music on my site.

I done somethings already but I am missing something. In functions.php file I added

//Enqueue scripts
function register_scripts() {
      wp_enqueue_script('jplayer',get_template_directory_uri().'/jplayer/jplayer.min.js',null,'1',false);

}
add_action('wp_enqueue_scripts','register_scripts');

then I added in header

<div id="WM" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <div class="jp-controls-holder" style="width:100px">
                <div class="jp-controls" style="float:left;">
                    <button class="jp-play" role="button" tabindex="0" style="padding:0;">p</button>
                    <button class="jp-stop" role="button" tabindex="0" style="padding:0;">s</button>
                </div>
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
            </div>
        </div>
    </div

then I added in footer

<script>
jQuery(document).ready(function() {
    jQuery("#WM").jPlayer({
        ready: function(){
            jQuery(this).jPlayer("setMedia", {
                mp3: "https://example.com/mymp.mp3"
            });
        },
    });

});
</script>

and now here is part that and I am struggling with. Jplayer needs to play along with mediaelement player on my site because jplayer contains file that has audio watermark on it so it will play over my music that is played over mediaelement(my theme supports it). So code that I added also in footer is:

<script>
            // click on play button

            jQuery('.home, .page-id-53, .page-id-29 ,.tax-download_tag, .tax-download_category, .search-results,.tax-download_tempo,.tax-download-artist').find('.mejs-button.mejs-playpause-button').on('click', function () {

jQuery(window).load(function() {
                      setTimeout( function(){

                        jQuery("#WM").jPlayer("volume", 1);
                        jQuery("#WM").jPlayer("play", 0);
                       }, 1000 );
                    });

                    jQuery(document).on('click', '.mejs-play > button', function() {

 </script>

so for some reason jplayer is not playing that file when I click play button(mediaelement) I guess I am missing something, but dont know what, if anyone maybe knows what to do to make it play when I click on play button, but when I pause it and play it again it should play from start.

Thank you

Answer 1

Lets say this is start of code

<script>
            // click on play button

            jQuery('.home, .page-id-53, .page-id-29 ,.tax-download_tag, .tax-download_category, .search-results,.tax-download_tempo,.tax-download-artist').find('.mejs-button.mejs-playpause-button').on('click', function () {

now I need to add something to run jplayer play button