Native Audio Player and the Edge Browser

Hi

I friend of mine commented that the native WP Audio Player doesn't quite look right ( the time loader ) in the Edge browser. You can test it here: http://kristuskirken.com/emner/menigheden/et-helligt-tempel-for-gud/ by clicking on the speaker icon.

It seems like it isn't rendering the JS correct to determine the length of the time-loader.

Is that a correct observation? If yes, how would I be able to fix that?

Ps. The issue happened on Microsoft Edge version "20.10240.16384.0"

Thanks a lot!
Sincerely,
Mika

  • Adam Czajczyk
    • Support Gorilla

    Hello Mika,

    I hope you're well today and thank you for your question!

    I'm not sure about Edge but it seems there are a lot of complains regarding such (and similar) compatibility issues on both Microsoft and WordPress forums. I'm afraid that's again because Microsoft usually decides to "go their own way" instead of following established standards.

    I did however noticed the same as you - I couldn't see the player on my Firefox and on Chrome browsers under Windows 7 Pro as well.

    Having said that, I checked your site and I think this may be the individual CSS-specific issue. Are you experiencing this on this site only or did you also came across that issue on other sites? How do you trigger the player and how did you placed it on your site?

    Please advise!

    Best regards,
    Adam

  • Milan
    • WordPress Wizard

    Hello @Mika,

    Hope you are well today and won't mind me chiming here. :slight_smile:

    I've just took a look at code snippet you've hosted as gist. In summary its just outputting audio player on the page. But it seems to me that you've overridden that player a bit on your site with some custom tweaking ? Because if I use audio shortcode like this on my sandbox site,

    [audio mp3="domain.com/ms_6003.mp3" ]

    Its rendering player without any issue on Edge and other browsers.

    If I understand correctly you are referring time-loader as red colored time passed indicator ? I've attached screenshot to minimize confusion on this. :slight_smile: If its what you are referring to then its rendering fine without any issue on Microsoft Edge[20.10240.16384.0].

    Furthermore you've said that player is not showing up in other browsers. But dear member its not the case with my testing. I was able to see player on chrome, firefox, edge, safari and also play with it. So its seems that it may be issue with cookies and caches of browsers. I suggest you clear cookies and caches of browser before you test next time.

    You valuable input will be waited by us. :slight_smile:

    Thanks & Have a fantastic day. :slight_smile:
    Milan

    • Mika
      • The Bug Hunter

      Hey Milan

      Thanks for your reply :slight_smile:

      You are viewing the old / default player. I added it again, so both options are available until I find a proper solution to the problem at hand.

      You are to look for the speaker icon and the download icon in the top bar. When you click on the speaker icon, you will see a player appear in the bottom of the browser.

      It works just fine on Safari, but not on all other browsers.

      Please let me know if you are having trouble finding it :slight_smile:

      Once again, thanks a lot for your help!
      Sincerely,
      Mika

  • Milan
    • WordPress Wizard

    Hello @Mika,

    Yes, I found player you are referring to :slight_smile:, I tested it with Chrome, Firefox and safari, surprisingly its working fine on safari, but on chrome and firefox it throws javascript error as soon as I hit Speaker icon on post. Please see attached screenshot. :slight_smile:

    It seems to me that javascript snippet which you have written is not able to find out "audioId" of audio element at the time when user clicks speaker button. But it surprises me that it successfully finds DOM element and start playing in safari browser. I've also checked "play" buttons compatibility with browsers, all the latest ones are supporting, hence my conclusions are that there is something wrong with java-script snippet. If you allow me to play with it, I can find some possible solution for this. Dear member if I get access to your site and theme files I can help you to sort out this. Can you send me files I'll need via ftp ?

    Would you be able to send in your FTP and wp-admin credentials so I could take a look?

    You can send the info through our private contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Send in:

    Subject: "Attn: Milan Savaliya"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Once we have this information then I can debug the issue further :slight_smile:

    Look forward to hearing back!

    Cheers,
    Milan

  • Adam Czajczyk
    • Support Gorilla

    Hey Mika,

    I took a liberty of making use of credentials you sent to Milan. Thanks to Milan's diagnosis I had a few ideas that I'd like to test but I wasn't able to put them to test on your site. I think you provided Milan with access staging site but the site is quite different to the "live" one. Could you please shed some light of it? I got a feeling that I'm terribly missing something obvious here :slight_smile:

    Best regards,
    Adam

  • Milan
    • WordPress Wizard

    Hello Mika,

    I hope you are having a great day and thank a lot for following us till now.

    I am feeling good to inform you that I was able to fix your issue on your stagging site with little bit modification in your custom js file.

    First of all please let me tell you what was main issue with your code, Actually Mika, you've written something like this in your code

    document.getElementById( 'audioId' ).pause();

    which actually forcing DOM to find element with id "audioId" rather than with the id which stored in variable audioId. I've replace all occurrence of above line with this one,

    document.getElementById( audioId ).pause();

    And that solved the issue. :slight_smile: Just needed to remove single quotes around the variable.

    Currently I've updated Your staging site's custom js file ( /wp-content/themes/3clicks-child-theme/js/custom-kristuskirken.js ) and confirmed that changes which I've made has solved your issue. Now I suggest you just replace that file with your live site's js file.

    If you don't want to go with so called "copy-paste" mechanism then just replace your main site's /wp-content/themes/3clicks-child-theme/js/custom-kristuskirken.js file's content with this one,

    jQuery(document).ready(function(){
    
    	/* Get IF of audio player */
    	var audioId = jQuery('.wp-audio-shortcode').attr("id");
    
    	var debugMode = false;
    
    	//Regsitering click event listener.
    	jQuery( ".audio_post_wrap .fa" ).click(function(){
    
    		if( jQuery(this).hasClass( "fa-volume-up" ) ){
    
    			console.log( ( debugMode != false ) ? 'Play button has been clicked. Will attempt to start audio' : '' );
    			jQuery( ".fa-volume-up" ).hide();
    			jQuery( ".fa-pause" ).show();
    			jQuery( ".player-box" ).show( 'slow' );
    
    			document.getElementById( audioId ).play();
    
    		}else{
    			console.log( ( debugMode != false ) ? 'Pause button has been clicked. Will attempt to pause audio' : '' );
    
    			document.getElementById( audioId ).pause();
    			jQuery( ".fa-volume-up" ).show();
    			jQuery( ".fa-pause").hide();
    			jQuery( ".player-box" ).hide( 'slow' );
    
    		}
    	});
    });

    Also Iv'e attached modified js file with this post to make your work little bit less. :wink:

    I am sure this will surely fix your issue with player and if it don't then please don't hesitate to ask us for further troubleshooting :slight_smile:

    I am happy that I became medium in solving your issue. Please let me know if there is something else in which you need help. :slight_smile:

    Wish you a very pleasant time Mika. :slight_smile:

    Cheers and Have a great day.
    Milan Savaliya

  • Milan
    • WordPress Wizard

    Hello @admin604,

    Hope you are well today. :slight_smile:

    Actually audio element was hidden by some CSS snippet, which I was able to make it visible with this bit of CSS code,

    .wp-audio-shortcode{
        visibility: visible !important;
    }

    Please leverage this nice plugin to manage CSS snippets like above one,
    Simple Custom CSS

    Hope this helps you. :slight_smile:

    Cheers,
    Milan

  • Milan
    • WordPress Wizard

    Hello @admin604,

    Hope you are doing well and thanks for sending me requested information. :slight_smile:

    I've just took a look at your site and found that on page which renders player ( in our example it is ) loads javascript libs with Rocket Loader technology of cloudflare. That led me to think that you are using cloudflare servcie ? Or you have some plugin installed on your end which is actually using cloudflare's rocket loader technology.

    If you are using cloudflare service then will you please disable rocket loader for your site via settings->CloudFlare settings (Performance Settings)->Rocket Loader->Toggle Off ?

    Let me know how it goes for you.

    Cheers,
    Milan

  • Milan
    • WordPress Wizard

    Hello @admin604,

    Thanks a lot for your kind words. :slight_smile:

    Yes I can confirm that it is working very well form here too. :slight_smile: I am attaching screenshot of my testing in chrome. Hope you will find this helpful. :slight_smile:

    I am glad that your got your player up and running. :wink: Please ping me back if you face any more issue regarding this. :slight_smile:

    Have plesant time ahead Mika. :slight_smile:

    Enjoy WPMU DEV.

    Cheers,
    Milan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.