Safari Embedded mp3 Problems on OSX 10.6 and Newer

If you have been embedding mp3 files into your html pages in the past, you may notice some recent problems if you use the Safari web browser on a Mac. If you are using OSX 10.6 or newer, you will see a blank spot in the page where the mp3 should be. The short answer is to tell OSX users to use the Firefox web browser, and everything will continue to work normally. However, if you’re curious about what’s behind it, and the more sophisticated solution, read on.

Apple’s HTML 5 Determination

What has happened is that Apple has decided to push the world to move on to html5. The way new versions of OSX handles web media has been changed. A new version of Quicktime is now built into OSX. This new version has dropped all support for the old method of embedding mp3 audio. Safari does not have any other way to play media in web pages, except through OSX integrated means, so Safari now just ignores the old standard embed code.

The Old Way

This is the old tried and true code for putting an mp3 in a web page (and this still works everywhere except Safari on OSX 10.6 and newer):

<object>
<param name="autostart" value="true">
<param name="src" value="http://my.server.here/MyAudioFileHere.mp3">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src=" http://my.server.here/MyAudioFileHere.mp3" width="703" height="32" type="mp3" controller="true" loop="false" autoplay="false" pluginspage="/quicktime/download/" /></embed>
</object>

Apple’s New Way

The new html5 way to do this is to have both an mp3 format file and an ogg format file (because some web browsers can play only one or the other through html5), and use this code:

<audio controls>
<source src="http://my.server.here/MyAudioFileHere.mp3" />
<source src="http://my.server.here/MyAudioFileHere.ogg" />
</audio>

What’s the Problem with this?

The problem is that many students use Internet Explorer, which cannot use many parts of html 5 yet. Even new versions of IE go into Quirks Mode if you are using an LMS, like Blackboard, and work like IE 5.5, which cannot display html5.

The New Solution

Happily, the web browsers that do not understand the new html5 embed code will ignore it, so we can create a new copy of our mp3 in ogg format, and then wrap our old code in the new code, and please most browsers:

<audio controls>
<source src=" http://my.server.here/MyAudioFileHere.mp3" />
<source src=" http://my.server.here/MyAudioFileHere.ogg" />
<object>
<param name="autostart" value="true">
<param name="src" value="http://my.server.here/MyAudioFileHere.mp3">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src=" http://my.server.here/MyAudioFileHere.mp3" width="703" height="32" type="mp3" controller="true" loop="false" autoplay="false" pluginspage="/quicktime/download/" /></embed>
</object>
</audio>

Browser Testing

This new code worked when tested in the following web browsers:

• Firefox 20 (on Windows 7)
• IE 6 (on Windows XP)
• IE 9 (on Windows 7)
• IE 10 running in IE10 mode or IE8 mode/Quirks Mode (on Windows 7)
• Safari 5.1.9 (on OSX 10.6.8)
• Firefox 13.0.1 (on OSX 10.5.8)
• Safari 5.0.6 (on OSX 10.5.8)
• Safari 6.0.5 (on OSX 10.8.4)