iPhone Web Audio Playlist Hack

By David Battino
April 23, 2009 | Comments: 11

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.)

Looptastic lets you mix and filter blocks of sound with your fingertips. The filter screen (30 seconds into this video) controls cutoff frequency and resonance simultaneously, as on Korg's Kaoss pads.

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:

<embed target="myself" src="play-button.gif" href="sound1.mp3" width="128" height="16" autoplay="true" type="audio/mp3" loop="true" controller="false" qtnext1="<sound2.mp3> T<myself>" qtnext2="<sound3.mp3> T<myself>"></embed>

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">

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.

You might also be interested in:


FYI: If I add a qtnext10 and beyond with iphone os 3.0, it fails even though the specs state that a value of 1-255 is supported.

m3u seems to work on iPhone os3.0, tested using the link in your other article. Still searching for a way to play background audio on mobile safari though...

@rdza: m3u seems to work on iPhone os3.0

You're right! And that's certainly easier to implement than the QuickTime approach. It's disappointing that the iPhone doesn't display song titles or allow skipping to the next track, though.

Has anyone found a way of playing audio in the background on iphone OS 3.1 (within Safari)? ... need audio to be playing small audio loop, while user is still able to view/interact with the webpage. Great article BTW David!

need to avoid the page being taken over by the Safari Audio Player (or what ever it's called)... as seen here: http://www.macworld.com/article/142062/2009/08/internet_radio_background.html

@Chris: Thanks for the Macworld link. Interesting approach, but it doesn't seem to solve the problem of sonifying sites. (Though I'll have to check what happens if you have multiple pages open.)

@Chris- did you ever find a solution for background music on the iPhone?

One thing I have found for playlisting - you can listen for the 'ended' event on the audio and actually change the audio src to a new song and QT will play it.

audio.addEventListener('ended', function(){
audio.src = "some new file.mp3";

This still doesn't solve the issue of opening the QT player full screen though (thus killing any real music site)

Did anyone found out a way to play mp3 in the background of the webpage with mobile safari (i.e. without having quicktime opening) ?

*"Did anyone found out a way to play mp3 in the background of the webpage with mobile safari (without having quicktime opening) ?"*

That's a very rare question, if anyone have the answer, please tell us :)

I heard about erica utilities wich is a collection of command lines wich includes a "play" function supposed to play a sound directly from the os...

Whatever if anyone more experienced than me can understand the way you make it work, it would really help!!!

Thanks in advance.

iPhone 4.0 is supposed to run multiple applications At the same time. Hopefully this means qt can play music while user surfs in safari. After apple's behavior with shutting down lala they might disallow anyone to do this but themselves. We will see soon.

Just a quick FYI - background audio is now supported in iOS 4 so you can hear music in the background of a web page in Mobile Safari. It does require the user to initiate playback however, so autoplay is disabled. You can also build playlists using javascript and HTML 5.0 audio.

News Topics

Recommended for You

Got a Question?