MediaElement audio tag not visible

Question

Audio tag works normally if I include it in the page. Like this:

[audio src="URL_TO_MP3_FILE"]

Than another case: I'm trying to make an "audio player" with window.open. I needed two days to do that right and to bypass popup blockers, but just when I achieved that, audio shortcode stopped working. During this two days it was working and it still works on other areas of my website... just not in this popup.

I checked the popup html with "view page source":

<audio class="wp-audio-shortcode" id="audio-4-1" autoplay="on"
    preload="none" style="width: 100%; visibility: hidden;" controls="controls">
    <source type="audio/mpeg" src="[URL_TO_MP3_FILE]?_=1">
    <a href="[URL_TO_MP3_FILE]">
        [AGAIN_THE_SAME_URL_TO_MP3_FILE]
    </a>
</audio>

It for sure looks weird, but I'm not the one to question that. I added this to the popup "page".

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(function() {
            $('.wp-audio-shortcode').css('visibility', 'visible');
            $('.wp-audio-shortcode').css('display', 'block');
        , 1000);
    });
</script>

If I check the page source now it looks like the visibility is set to visible, but still I don't see the player.

<audio class="wp-audio-shortcode" id="audio-4-1" autoplay="on"
    preload="none" style="width: 100%; visibility: visible; display: block;"
    controls="controls">
    <source type="audio/mpeg" src="[URL_TO_MP3_FILE]?_=1">
    <a href="[URL_TO_MP3_FILE]">
        [AGAIN_THE_SAME_URL_TO_MP3_FILE]
    </a>
</audio>

Pure pain.

I read all this but still I have no solution:

http://codex.wordpress.org/Audio_Shortcode

http://wordpress.org/support/topic/audio-embed-shortcode-not-working-ver-222

http://wordpress.org/support/topic/audio-player-not-showing-1

Answer 1

The audio shortcode does a lot more than just create an tag in the page.

The WordPress audio and video shortcodes are powered by the MediaElementJS library, which is a combination of Javascript and CSS code that loads into the footer of the page whenever you have a post with one of those in it. The JS code processes those elements and turns them into proper players on all browsers, even ones that don't natively support the element or which don't support that specific filetype.

Your audio code alone, along with your JS, isn't a complete implementation. It lacks all the MEJS code, the player CSS skin, and the player itself if needed for your browser.

Stick to the shortcode. It's simpler all around.