Jplayer connected/bind to mediaelement

JavaScript
,
1

Hello,

how are you?

I have question related to jplayer, mediaelement, javascript, wordpress, jquery

I am trying to bind jplayer on my site to mediaelement player button(wordpress) that plays music on my site. mediaelement player is embedded in my theme and plays music that users upload on site. Now I want other player (jplayer) to play along/over/in same time with my main player (mediaelement) because jplayer will play voice tag/watermark audio protection. So here are things that I have done:

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 on mediaelement, but when I pause it and play it again it should play from start.

Thank you for help

2

how are you?

I’m fine I guess.

I have question related to jplayer, mediaelement, javascript, wordpress, jquery

I think it is not wordpress fault that it does not work :slight_smile:

by the way:
you can use ` to properly display code snippets. and ```js //your js here ``` for blocks of code.

Lets get to the problem:

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>

Is this just an excerpt of the code? Here are a few pointers to what probably are the problems:

  1. You are not properly closing/opening the script tag (/script> and script>)
  2. You create an eventhandler for a button and then in that function you wait for the document to load? I guess by the time you click that button, the window is already loaded, so you will never get to the inner part of the function
  3. you have a function at the end of the code that you never close.
  4. Use your dev tools. (CMD+ALT+I or CTRL+ALT+I) and see if there are any errors logged - do you get any?

Hope this helps!
Happy Coding.
Martin

3

Hi, thanks for answer,

  1. opening tags are ok, I just removed here opening tag because on preview screen I saw that it wont show whole code so I removed < so you can see it.

  2. Well this code can be changed it was just me testing something, I just need to make when I press mediaelement button (play) it automatically plays jplayer audio file.

So lets say that this is start code:

<script>


// clicking on "play" button

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

so mejs-button.mejs-playpause-button is button of mediaelement player, now I need to add code to run jplayer when play button of mediaelement is pressed and to stop jplayer when mediaelement hits pause.

I tried a lot of combinations that I found online, also something similar on other site, but cant mange to find/make right code to run it together, so if you have any idea it would be great.

Thank you

4

It will if you format the code properly. Just place three backticks (`) on the line before the code you paste in, and three backticks on the line after the code. I will format your code for you this time.

5

Ok thank you!

6

Does anyone have any suggestion that I could try?

7

Hey there.
As I already suggested and tried to explain: You have an eventhandler for (window).load which you do not need.
Remove that line.

Try to debug your script. Open the developer tools (CMD+ALT+I or CTRL+ALT+I) and see if there are any errors thrown when you load the page. The devtools point you to the point in the file where this happens.
If everything fails, place a console.log('click') within your click function, to make sure that the script gets called. From there, you can try to find out what the problem is. You can also try the script in the console. Maybe the elements that have the eventlistener attached, can’t be found in the first place.

In your console, enter 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') and see if it returns anything. If not, you need to check your selectors.

Let me know how you proceeded with your debugging session. Here you can find more information about debugging with browser devtools: https://developers.google.com/web/tools/chrome-devtools/javascript/

Best,
Martin

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.