2

I use the loop to post remotely to a detached website.

When I post audio to a page that contains

<?php wp_footer(); ?>

I get an audio player that does not support right-click copy audio link. I assume that this is the WP player and it's replacing the browser player. On pages where I exclude the footer call I get the default browser player – it does support the right-click options.

I could just leave the footer bit off – but to use plugins with that page I need it.

Examples:

This page has the footer call – if you right-click the player you do not get option to save audio

https://ktbb.com/infocus/index.php

This page has the footer bit removed – you now have the normal browser behavior of being able to save audio – also the Social icons (shared counts plugin) are gone because they require the footer call.

https://ktbb.com/infocus/

I found what I thought was the solution here Wordpress audio player has two different styles Tom's reply suggested adding

add_action('init', 'remove_media_element', 10);
function remove_media_element() {
    wp_deregister_script('wp-mediaelement');
    wp_deregister_style('wp-mediaelement');
}

That did fix the issue with the audio players - but it disabled the "Add Media" button in the new post dialog.

So question is how to disable the WP theme player so that the browser default is always used?

Thanks for any suggestions Daf

11
  • This would indicate that somewhere in the footer, the plugin for the audio player you want to use, is including either some markup or scripting and by removing the wp_footer() something required by your preferred audio player is missing and so the fall back works. Why are you excluding the footer? Aug 15, 2021 at 2:27
  • Yes - I think that is exactly what is going on. Any ideas as to how to recognize and remove the WP player? I'd rather not use it for any page. I'm excluding the footer on the pages that don't use any theme related functions, plugins. Some pages we post to use WP plugins - those plugs won't work without footer bit.
    – Daf57
    Aug 15, 2021 at 9:47
  • 1
    @Daf57, are you absolutely sure you want to use the native audio player in the browser which tends to look and behave differently across the various browsers, devices and operating systems? Because that's actually the issue wp-mediaelement can fix for us, see mediaelementjs.com. And if you're just concerned about being able to save the audio, then you could add a link for users to download the audio? Also, you should always keep the wp_footer() call on your page because without it, WordPress core may not work properly without you realizing it.
    – Sally CJ
    Aug 16, 2021 at 15:13
  • 1
    Thanks Tony and Sally! I'm going to play around with these suggestions and see what comes out. Thanks again!
    – Daf57
    Aug 16, 2021 at 18:39
  • 1
    Awesome answer, Sally! Thanks for taking the time to post it! :)
    – Daf57
    Aug 17, 2021 at 11:20

1 Answer 1

1

how to disable the WP theme player so that the browser default is always used?

I get an audio player that does not support right-click copy audio link. I assume that this is the WP player and it's replacing the browser player.

Yes, that's indeed the default WordPress media player which uses the Media Element library (MediaElement.js), and yes, it replaces the native audio/video player in the browser with one that is unified, or looks and behaves/works consistently in most browsers (MS Edge, Firefox, Safari, Chrome, etc.), regardless the device/resolution and operating system.

So are you absolutely sure you want to use the native audio player which tends to look and behave differently in those browsers?

But yes, I would also love to have the default context menu (or right-click menu) items on the audio element; however, and in reply to your comment: "I just don't understand why the WP player would break the standard browser right-click functions", it's technically because when you right-click on the audio, you're actually right-clicking on the Media Element player and not the actual audio element, hence the default right-click menu is not opened — and no, it can't be opened programmatically via JS. (You can code custom context menus, but that's another story)

add_action('init', 'remove_media_element', 10);
function remove_media_element() {
    wp_deregister_script('wp-mediaelement');
    wp_deregister_style('wp-mediaelement');
}

That did fix the issue with the audio players - but it disabled the "Add Media" button in the new post dialog.

Yes, that also happened in my case (WordPress 5.8) and I don't know for sure why so, but since I could see you're using the audio shortcode or maybe you just pasted the audio URL (?), then you can try the options I suggested below.

So if you really must or need to use the native audio player..

Then, without using a 3rd-party WordPress plugin, you can do one of the following:

  • Easy, no PHP coding needed: Use the WordPress [audio] shortcode to embed your audio, but use a custom CSS class like my-audio or no CSS class at all, i.e. add class="" to the shortcode. E.g.

    [audio src="https://example.com/path/to/audio.mp3" class="my-audio"]
    [audio src="https://example.com/path/to/audio.mp3" class=""]
    

    So that would output an <audio> tag without the CSS class named wp-audio-shortcode which means Media Element will not be applied on that audio, i.e. the audio will not use the Media Element player.

  • Easy as well, specifically if you use the block editor (Gutenberg), no PHP coding needed: Use the WordPress audio block (<!-- wp:audio --><!-- /wp:audio -->) to embed your audio.

    And just like the [audio] shortcode, the audio block also would not apply Media Element on the audio element.

  • Or the third option, via custom PHP coding, would be to completely disable the Media Element player/library using the wp_audio_shortcode_library filter.

    So for example, you can add this to your theme functions.php file:

    // Disables the media library (which defaults to mediaelement, i.e. MediaElement.js)
    // used for the audio shortcode, i.e. [audio] and media URLs that were on their own line.
    add_filter( 'wp_audio_shortcode_library', '__return_empty_string' );
    

    And actually, there's also the wp_audio_shortcode_class filter if you just want to remove or change the wp-audio-shortcode class from the <audio> tag without having to use the class attribute in the audio shortcode.

But if you're just concerned about having the option to save/download the audio..

Then as I said in the comments, you could (use custom HTML to) add a link for users to download the audio. For example..

[audio src="https://example.com/path/to/audio.mp3"]
<a href="https://example.com/path/to/audio.mp3">Download Audio</a>

And actually, you could create a custom shortcode that would output an HTML similar to the one above. (to save yourself from tedious copy-pasting/typing)

Other Notes

On pages where I exclude the footer call I get the default browser player – it does support the right-click options.

That was likely because by default, the Media Element (wp-mediaelement) scripts and styles are enqueued in the footer (because they're being enqueued only if the audio/video shortcode/embed is used on the page), so because you removed the footer, then those scripts and styles were not loaded on the page and therefore the Media Element library was never initialized and thus the native player was used.

I could just leave the footer bit off – but to use plugins with that page I need it.

You can always remove unnecessary stuff in the footer, e.g. the theme credit (if the theme author allows removing it), but wp_footer() should always be called on the page because without it, scripts and styles enqueued in the footer would not be loaded, causing the page to not work or look as expected (e.g. in your case, the social icons were gone), and WordPress core may also not work properly without you realizing it, e.g. the admin bar is not showing even when it's set to show on the page (and any other front-end pages).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.