Removing Theme Audio Player – Using Browser Default

by

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

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

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


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

Leave a Comment