WordPress.org

Ready to get started?Download WordPress

Forums

Core Media Player - Stop Space Bar From Stopping And Starting Audio? (32 posts)

  1. joshuacls
    Member
    Posted 11 months ago #

    Hi. I just upgraded to wordpress 3.8.1 from a much older version, and had to change my audio player, from a plugin I was happy with, but is no longer supported. The best solution I have found was the built in core media player (3.6?) --- as far as looks, and function.

    Unfortunately, there's a problem with it. Space bar starts and stops the Audio, and you can not turn this feature off!

    I've searched high and low, and cannot seem to find a solution to this.

    I'm in the audio production business, and have an OLARK chat box on my site, that customers routinely go through audio samples, and chat with me about them through.

    The problem is --- if they try to type in the box, while listening to the samples, the space bar toggles the media player on and off --- and they can't type a space! This is very annoying, and I have not been able to find a work around.

    The only instance where customers need to type is this chat box, so if there's a known individual work around for that I'm open to it.

    Here's my site: http://www.ursamajorsound.com

    Thanks in advance for your help!

  2. Evan Herman
    Member
    Posted 11 months ago #

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

    What browser are you running?

  3. joshuacls
    Member
    Posted 11 months ago #

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

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

  4. Evan Herman
    Member
    Posted 11 months ago #

    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.

  5. joshuacls
    Member
    Posted 11 months ago #

    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?

  6. Evan Herman
    Member
    Posted 11 months ago #

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

  7. Evan Herman
    Member
    Posted 11 months ago #

    You can also take a look here to confirm.

    and this stackoverflow thread that may help you

  8. joshuacls
    Member
    Posted 11 months ago #

    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.

  9. Evan Herman
    Member
    Posted 11 months ago #

    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.

  10. Evan Herman
    Member
    Posted 11 months ago #

    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...

  11. joshuacls
    Member
    Posted 11 months ago #

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

  12. Evan Herman
    Member
    Posted 11 months ago #

    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.

  13. joshuacls
    Member
    Posted 11 months ago #

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

  14. Evan Herman
    Member
    Posted 11 months ago #

    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.

  15. joshuacls
    Member
    Posted 11 months ago #

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

  16. Evan Herman
    Member
    Posted 11 months ago #

    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');
  17. joshuacls
    Member
    Posted 11 months ago #

    Man. Still no dice. Haha.

  18. Evan Herman
    Member
    Posted 11 months ago #

    Yea I do see the function in there. It just doesn't look like its firing.

    Let me try setting it up on localhost and embedding a song, and see if i can replicate it. Give me a few mins. Ill report back here.

  19. joshuacls
    Member
    Posted 11 months ago #

    It is updated to the newest code you just sent over

  20. Evan Herman
    Member
    Posted 11 months ago #

    Ok, I've got the audio embedded. Let me do some testing.

  21. Evan Herman
    Member
    Posted 11 months ago #

    well this is turning out to be a little more challenging than anticipated.

  22. joshuacls
    Member
    Posted 11 months ago #

    It seems like it should be so easy...
    Shocking that no one else has had this problem!
    (at least that I can see)

  23. Evan Herman
    Member
    Posted 11 months ago #

    Quite interesting that this function:

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

    removes the action when clicking enter, but not spacebar. check it out.

  24. joshuacls
    Member
    Posted 11 months ago #

    Interesting... Enter doesn't actually seem to be an issue in Safari, at least.

  25. Evan Herman
    Member
    Posted 11 months ago #

    Yea, I figured.

    I'm still working, well figure it out.

  26. joshuacls
    Member
    Posted 11 months ago #

    You're the man, brother!

  27. Evan Herman
    Member
    Posted 11 months ago #

    Ok, well I've figured it out in the way that were NOT supposed to be doing it.

    I had to go in and edit a core WordPress file, which means the next time WordPress gets updated the changes are going to be thrown out.

    I'm trying to find the correct filter to use to change up the settings before the audio player is initialized.

    If I can't figure it out I'll at least get you the one that works.

  28. Evan Herman
    Member
    Posted 11 months ago #

    Ok, so I've deregistered the default script, and re-registered a new script. One issue tho is the player skin does not look the same. The controls work as you need, but the skin is a bit different.

  29. joshuacls
    Member
    Posted 11 months ago #

    How different? Can you show me?
    Also, If you ever need audio post production work done, hit me up --- I'll hook you up!

  30. Evan Herman
    Member
    Posted 11 months ago #

    This is what it looks like: here . I'm working on getting the styles the same as they were.

    And thanks dude I really appreciate that.

Reply »

You must log in to post.

About this Topic