Hello again! I've been working on a boatload of interesting projects this blogless month, including an iPhone music app called Looptastic. (I consulted on the interface and helped with the marketing, but my greatest contribution was probably lending the programmer my Korg Kaossilator at a jam session.)

Exploring the iPhone/iPod Touch world, I was surprised to find that the built-in web browser, Mobile Safari, opens audio links in a separate QuickTime player. There doesn't seem to be a way to play audio directly from a webpage. (Perhaps that's changing in OS 3, but if you know of a workaround now, please leave a comment.)

The simplest, least jarring approach I found to encode web audio for the iPhone browser was to use plain MP3 links:

• Sound 1 <a href="sound1.mp3">Sound 1</a>

Even the target="_blank" attribute I usually add to audio links caused problems. In normal browsers, that prevents the browser from overwriting the main window with a plug-in player when the link is clicked. But in Mobile Safari, it opens another blank window in addition to the QuickTime player. So when playback is done, the iPhone returns you to a confusing blank page:

• Sound 2 <a href="sound2.mp3" target="_blank">Sound 2</a>

The best compromise I found was to use Delicious Play Tagger to insert a Flash playback button in front of the MP3 links. Mobile Safari doesn't support Flash, so it inserts the button image but plays MP3 links as normal. (Contrast that to Yahoo Media Player, which rewrites the MP3 links into Flash triggers, disabling them on the iPhone.) Play Tagger is not a perfect solution, because I'd still want to use target=blank to help visitors who are running normal browsers.

You can see Play Tagger and Yahoo Media Player in action in my article Three Free & Easy Web Audio Players. Interestingly, the third player in that article, one I cooked up, hits the middle ground on Mobile Safari. It opens a new window with info about the audio file, but you still have to listen in the iPhone's QuickTime player. Note the variety of test files in that article: The iPhone can play only MP3, AIFF, and WAV. Even the m3u playlist format goes unsupported.

The iPhone Playlist Hack

But I did find a sneaky way to make playlists for Mobile Safari. If you embed the audio files using QuickTime's QTNext parameter, the next file in your list starts playing automatically after the first is finished. You can also skip forward (but not back) with the iPhone player's controls. One quirk that initially stumped me is that the audio files need to be in the same zone (i.e., all on your hard drive or all on the Web). A mixture of local and Web files doesn't work.

Another speed bump I discovered is that some Windows browsers wouldn't advance to the next song unless the QuickTime AutoPlay parameter was true. But that meant the playlist started playing automatically as soon as the page loaded. I worked around that by making the first song an image, as described in this article at Daytime Running Lights, and then looping the image (!) to prevent the playlist from advancing until the visitor clicks the image. Here's the basic code:

The target parameter (and its T shorthand) tells QuickTime to load the media file into the original playback area, here a 128x16-pixel rectangle. (This is for normal browsers; Mobile Safari launches the media file in the QuickTime player.) The href parameter specifies the file QuickTime will play when the visitor clicks on the image specified in src. Setting the controller parameter to false prevents QuickTime from jamming a transport bar underneath the placeholder image.

Here's the embed tag inserted with JavaScript to pleasure Internet Explorer and the W3C. There are a few oddities: In Internet Explorer, you have to roll over the QuickTime controller to trigger playback. And in Windows Firefox, the button stretches out despite the scale-to-aspect parameter, and clicking the image doesn't load the audio.

<script language="JavaScript" type="text/javascript">
//<![CDATA[
QT_WriteOBJECT('play-gif-16.gif','128','16','',
'controller','false',
'scale','aspect',
'target','myself',
'href',sound1.mp3',
'autoplay','true',
'loop','true',
'type','audio/mp3',
'qtnext1','<sound2.mp3>T<myself>',
'qtnext2','<sound3.mp3>T<myself>',
'qtnext3','<sound4.mp3>T<myself>',
'qtnext4','<sound5.mp3>T<myself>');
//]]>
</script>

A side benefit of using the QTNext approach is that it lowers the RAM hit on the iPhone. If you embedded each file separately, Mobile Safari would try to load them all. This way, it loads as it goes.

What iPhone browser hacks have you discovered? Please leave a link.