[audio] shortcode not rendered in Chromium browser

I run a site for a talking newspaper for the blind and we host a lot of mp3 files.

Each post contains the following code:

[audio mp3="<link>"][/audio]

and this works really well for us on every browser except Chromium 55.

In Chromium the audio player is replaced by a black box that when clicked redirects to the actual mp3 player.

[audio mp3="<link>"][/audio] normally renders in the output to:

<audio class="wp-audio-shortcode" id="audio-22-1" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="[link]?_=1" /><a href="[link]">[link]</a></audio>

But in Chromium 55 it is rendered in the DOM as:

<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<span class="mejs-offscreen">Audio Player</span>
<div id="mep_0" class="mejs-container svg wp-audio-shortcode mejs-audio" tabindex="0" role="application" arial-label="Audio Player" style="width: 100%; height: 30px;">
    <div class="mejs-inner">
        <div class="mejs-mediaelement">
            <div class="me-cannotplay">
                <a href="[link]">
                    <span>Download File</span>
                </a>
            </div>
            <audio class="wp-audio-shortcode" id="audio-22-1" preload="auto" style="width: 100%; display: none;">
                <source type="audio/mpeg" src="="[link]?_=1">
                <a href="="[link]">[link]</a>
            </audio>
        </div>
        <div class="mejs-layers"></div>
        <div class="mejs-controls" style="display: none;"></div>
        <div class="mejs-clear"></div>
    </div>
</div>

Which suggests that there is a script which believes that this browser cannot play the file and is replacing the normal rendering directly in the DOM.

Yet if I put:

<audio class="wp-audio-shortcode" id="audio-22-1" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="[link]?_=1" /><a href="[link]">[link]</a></audio>

directly in a plain .html file the default browser player is displayed correctly and the file plays correctly.

I’ve ruled out a theme issue as this happens on my normal theme “tiny-framework” and also in the default “Twenty Sixteen”.

This only happens with sites hosted in WordPress the same <audio></audio> code works fine in other frameworks so it isn’t a browser bug but seems to be a WordPress one somewhere.

• This topic was modified 8 years, 1 month ago by yknivag.