[wp-trac] [WordPress Trac] #24875: MP3 not working in audio shortcode in Firefox

[WordPress Trac]

#24875: MP3 not working in audio shortcode in Firefox
--------------------------+-----------------------------
 Reporter:  tollmanz      |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:  trunk
 Severity:  major         |   Keywords:
--------------------------+-----------------------------
 When displaying an MP3 using the audio shortcode, the file is not playable
 in Firefox (v22) on OS X or Windows. I am testing against the latest
 mediaElement.js updates with Twenty Thirteen.

 I am using @wonderboymusic's test file
 (http://core.trac.wordpress.org/attachment/ticket/24805/13%20Soul%20Calibur.mp3)
 and have confirmed it with other files.

 I get the following error on Firefox:

 > [02:11:02.501] Specified "type" attribute of "audio/mpeg" is not
 supported. Load of media resource http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3 failed. @
 http://wptrunk.dev/index.php/testing-audio/

 The shortcode entered is:

 > [audio mp3="http://wptrunk.dev/wp-content/uploads/2013/07/13-Soul-
 Calibur-1.mp3"][/audio]

 The HTML is initially rendered as:

 {{{<audio class="wp-audio-shortcode" id="audio-1396-1" preload="none"
 controls="controls"><source type="audio/mpeg" src="http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3" /><a
 href="http://wptrunk.dev/wp-content/uploads/2013/07/13-Soul-
 Calibur-1.mp3">http://wptrunk.dev/wp-content/uploads/2013/07/13-Soul-
 Calibur-1.mp3</a></audio>}}}

 The JS in Firefox rewrites the HTML to:

 {{{
 <div style="width: 400px; height: 30px;" id="mep_0" class="mejs-container
 svg wp-audio-shortcode mejs-audio">
         <div class="mejs-inner">
                 <div class="mejs-mediaelement">
                         <div style="" class="me-cannotplay"><a
                                         href="http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3"><span>Download
 File</span></a>
                         </div>
                         <audio style="display: none;" class="wp-audio-
 shortcode" id="audio-1396-1" preload="none">
                                 <source type="audio/mpeg"
 src="http://wptrunk.dev/wp-content/uploads/2013/07/13-Soul-Calibur-1.mp3">
                                 <a href="http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3">http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3</a>
                         </audio>
                 </div>
                 <div class="mejs-layers"></div>
                 <div style="display: none;" class="mejs-controls"></div>
                 <div class="mejs-clear"></div>
         </div>
 </div>
 }}}

 In Chrome, it renders correctly and the JS rewrites the HTML to:

 {{{
 <div id="mep_0" class="mejs-container svg wp-audio-shortcode mejs-audio"
 style="width: 400px; height: 30px;">
         <div class="mejs-inner">
                 <div class="mejs-mediaelement">
                         <audio class="wp-audio-shortcode"
 id="audio-1396-1" preload="none"
                                    src="http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3">
                                 <source type="audio/mpeg"
 src="http://wptrunk.dev/wp-content/uploads/2013/07/13-Soul-Calibur-1.mp3">
                                 <a href="http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3">http://wptrunk.dev/wp-
 content/uploads/2013/07/13-Soul-Calibur-1.mp3</a>
                         </audio>
                 </div>
                 <div class="mejs-layers">
                         <div class="mejs-poster mejs-layer"
 style="display: none; width: 400px; height: 30px;"></div>
                 </div>
                 <div class="mejs-controls">
                         <div class="mejs-button mejs-playpause-button
 mejs-play">
                                 <button type="button" aria-
 controls="mep_0" title="Play/Pause" aria-label="Play/Pause"></button>
                         </div>
                         <div class="mejs-time mejs-currenttime-
 container"><span class="mejs-currenttime">00:00</span></div>
                         <div class="mejs-time-rail" style="width:
 218px;"><span class="mejs-time-total" style="width: 208px;"><span
                                                 class="mejs-time-
 buffering" style="display: none;"></span><span class="mejs-time-
 loaded"></span><span
                                                 class="mejs-time-
 current"></span><span class="mejs-time-handle"></span><span
                                                 class="mejs-time-
 float"><span class="mejs-time-float-current">00:00</span><span
                                                         class="mejs-time-
 float-corner"></span></span></span></div>
                         <div class="mejs-time mejs-duration-
 container"><span class="mejs-duration">00:00</span></div>
                         <div class="mejs-button mejs-volume-button mejs-
 mute">
                                 <button type="button" aria-
 controls="mep_0" title="Mute Toggle" aria-label="Mute Toggle"></button>
                         </div>
                         <div class="mejs-horizontal-volume-slider mejs-
 mute">
                                 <div class="mejs-horizontal-volume-
 total"></div>
                                 <div class="mejs-horizontal-volume-
 current" style="width: 40px;"></div>
                                 <div class="mejs-horizontal-volume-handle"
 style="left: 27px;"></div>
                         </div>
                 </div>
                 <div class="mejs-clear"></div>
         </div>
 </div>
 }}}

--
Ticket URL: <http://core.trac.wordpress.org/ticket/24875>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software