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]">

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

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;"
    <source type="audio/mpeg" src="[URL_TO_MP3_FILE]?_=1">
    <a href="[URL_TO_MP3_FILE]">

Pure pain.

I read all this but still I have no solution:





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.

  • Well, I am. My popup simply loads one file from my theme directory...and I use do_shortcode, of course. The code I pasted is the html output. – user568021 May 21 '14 at 5:50
  • I found a problem. I forgot to put <?php wp_footer()?> at the end of the file. – user568021 May 21 '14 at 5:59
  • 1
    Ahh, yes. The footer is where the JS gets enqueued into. Don't forget the header too. A page needs to be complete all around, even a popup. :) – Otto May 21 '14 at 6:03

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.