WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

In chrome and firefox (and maybe others) the audio link does not render a media controller. E.g.

[audio http://example.com/wp/wp-content/uploads/2011/09/file.mp3]

In Chrome, view page source show this code in place:

<div id="mep_0" class="mejs-container" style="width: 400px; height: 30px; ">    
  <div class="mejs-inner"><div class="mejs-mediaelement">
    <audio id="wp_mep_1" preload="none">
    <object width="400" height="30" type="application/x-shockwave-flash" data="http://example.com/wp/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
        <param name="movie" value="http://example.com/wp/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
        <param name="flashvars" value="controls=true&amp;file=">            
</audio></div><div class="mejs-layers"></div><div class="mejs-controls"></div><div class="mejs-clear"></div></div></div>

UPDATE: In the JS console I note an error:

Uncaught TypeError: Cannot read property 'url' of undefined
share|improve this question
Is the path to the file correct? I see under flashvars, file= is empty, so it would make sense that nothing is loading. – Milo Sep 14 '11 at 14:21
@Milo, yes I believe so (I tested it OK). I have just updated question with a JS error... – Rob Sep 14 '11 at 14:36
it's difficult to say without seeing it in context. is jQuery being sourced properly in your theme? maybe try the default theme and disabling other plugins to see if there's a conflict. – Milo Sep 14 '11 at 14:57
Thanks for your suggestions @Milo. I am seeing different behaviour depending on which plugin is activated. I'm going to step through them methodically to work it out.... – Rob Sep 15 '11 at 0:56
OK, it's the MediaElement.js - HTML5 Audio and Video plugin which produces the black box. Without it I get nothing. See here: (butterflyhurricane.com) – Rob Sep 15 '11 at 11:24
up vote 3 down vote accepted

Your shortcode:

[audio http://example.com/wp/wp-content/uploads/2011/09/file.mp3]

should be:

[audio src="http://example.com/wp/wp-content/uploads/2011/09/file.mp3"]

Note the src="" around the filename.

share|improve this answer
Doh! Thanks Milo! – Rob Sep 15 '11 at 22:39

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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