WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 5 months ago

#24875 closed defect (bug) (worksforme)

MP3 not working in audio shortcode in Firefox

Reported by: tollmanz Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.6
Component: Media Keywords:
Focuses: Cc:

Description

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>

Attachments (4)

broken-mp3-ff.png (18.6 KB) - added by tollmanz 9 months ago.
Broken Firefox MP3 Display
mediaelementjs-ff.png (215.0 KB) - added by tollmanz 9 months ago.
It appears that the mediaelement.js website is also struggling with Firefox and MP3s
firefox-with-flash.png (15.6 KB) - added by tollmanz 9 months ago.
Audio rendering with Flash installed in Firefox v22 on OS X
mediaelementjs-ff.2.png (219.0 KB) - added by tollmanz 9 months ago.
Flash + Firefox + MP3 on mediaelementjs.com website

Download all attachments as: .zip

Change History (11)

tollmanz9 months ago

Broken Firefox MP3 Display

tollmanz9 months ago

It appears that the mediaelement.js website is also struggling with Firefox and MP3s

comment:1 tollmanz9 months ago

According to the mediaelement.js website, Firefox is supported with Flash. I have installed Flash on OS X and nothing renders for the audio. Using the same shortcode and rendered HTML, the JS renders the following with Flash installed:

<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">
			<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 class="mejs-controls"></div>
		<div class="mejs-clear"></div>
	</div>
</div>

Image of the issue is forthcoming.

I get the same error as reported above:

[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/

According to a StackExchange discussion, Firefox should natively support MP3s in v21+.

tollmanz9 months ago

Audio rendering with Flash installed in Firefox v22 on OS X

comment:2 tollmanz9 months ago

It appears that the mediaelement.js website now has a working MP3 with flash installed in Firefox.

tollmanz9 months ago

Flash + Firefox + MP3 on mediaelementjs.com website

comment:3 tollmanz9 months ago

I also tested the exact MP3 from mediaelement.js' website and it does not work in WordPress.

Test MP3: http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3

cURL request to download it:

curl 'http://mediaelementjs.com/media/AirReview-Landmarks-02-ChasingCorporate.mp3' -H 'Pragma: no-cache' -H 'Cache-Control: no-cache' --compressed > test.mp3

comment:5 tollmanz9 months ago

Well...there's some egg on the face :) It works! Looks like the Github repo is 13 hours behind SVN trunk. Feel free to close.

comment:6 ocean909 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Severity changed from major to normal
  • Status changed from new to closed

comment:7 SergeyBiryukov5 months ago

  • Version changed from trunk to 3.6
Note: See TracTickets for help on using tickets.