Core Media Player – Stop Space Bar From Stopping And Starting Audio?

For me, spacebar moves me down the page. The audio doesn’t start and stop when hitting space.

What browser are you running?

Evan, it’s once a song has already started playing. Tested on both Safari & Chrome.

https://www.ursamajorsound.com/samples has live audio. Start a track, then hit the space bar and you’ll see what I’m talking about.

Yea I know what you mean, because YouTube implements the same features. I wasn’t able to replicate it, I tested it out in chrome.

If you click play, and then click somewhere else on the page, and then click space bar that bug wont happen. If you click play, and immediately click space bar, yes that is going to happen.

That also happens with any buttons or links on the page as well. Try clicking a button on your site, and then hitting space bar. You’ll click the button again. It’s just the nature of some browsers.

Odd. I’ve had 2 clients complain about it this morning already, and was recreating the issue myself.

Any one have an idea on how to override or bypass it?

Try out my suggestions above and you’ll see what I mean.

You can also take a look here to confirm.

and this stackoverflow thread that may help you

Again, my issue is with clients clicking play, and then going and typing in the chat box. Even after clicking in the chat box, spacebar still turns the player on and off.

Telling my customers to click elsewhere and then back in the chat is annoying, and comes across as unprofessional.

There has to be a way to completely disable the space bar controlling the player, as this was how it worked with the old plugin player I had previously.

I understand it comes across as annoying and unprofessional. But what I’m saying is that is a default chrome behavior, and probably more of an issue with the core code of WordPress.

Another reference to it

I would reach out to a core developer in IRC or through twitter. I’m sure they may have a better fix.

The only solution I can conjur up, is writing a custom javascript function that fires after the play button is clicked, which would then remove focus of the playbutton using .blur. Maybe something like this:

$(document).ready(function() {
    $('.mejs-play').click(function() {
        this.blur();
    });
});

I’m not %100 sure tho.

I’d like to think this would work…

Would that go in functions.php? I’m not a code guy (outside of html) — at all.

This would go inside of functions.php inside of a custom php function that would load that javascript function into the head. Something like:

function remove_playbutton_focus() {
?>
<script>
jQuery(document).ready(function() {
    jQuery('.mejs-play').click(function() {
        this.blur();
    });
});
</script>
<?php
}
add_action('wp_head','remove_playbutton_focus');

Note: I’ve changed the $ to jQuery, which is the jQuery no conflict wrapper. WordPress loads jQuery in no conflict by default, as to not conflict with other javascript libraries (prototype and many more). Not important really, just a tid bit of info.

Yeah, no dice man. I appreciate your help BTW.

No problem. Let me keep thinking. I believe that’s the best way. Maybe we just need to adjust something. Can you change this.blur(); to alert(‘test’);

just to confirm that when the button is pressed the function is firing.

Should be updated, though I’m seeing no change.

It could also very well be that the button is inside of the anchor tag, and we were trying to remove focus of the anchor when infact the button was focused.

Try this possibly:

function remove_playbutton_focus() {
?>
<script>
jQuery(document).ready(function() {
       jQuery('.mejs-play > button').click(function() {
         setTimeout(function() {
         this.blur();
        },800);
     });
});
</script>
<?php
}
add_action('wp_head','remove_playbutton_focus');