Audio in iOS

If you have considered putting together sounds using HTML5 and javascript as tutorials all over the web suggest - you have likely run into troubles everywhere you turned.

Apple has made some undocumented (or undocumented-where-I-looked) decisions, which make development painful.  First of all, each audio file you wish to load should be triggered by user action.  This means, click button => play 'a'; click another button => play 'b'.  Forget playing 'a', 'b','c' in a row consistently.  This also means, no sound on page load!

Turns out, there are ways to get around it. This is the purpose of my life for the next few days.

But first, I would like to show what DOES NOT WORK in iOS.

    $('a#play-all').bind('vclick', function(){  

           //here is our touch/click handler that starts everything up
           var audio = $('audio#a').get(0);  

           // so far so good - here is the audio element
           audio.play();  //great!  You'll hear your sound
    }

So what am I complaining about?  Oh, right!  I want to play multiple sounds in a row.  Let's say, I am sounding out the word B-A-T with a sound file associated with every letter.

    var sounds = Array('b', 'a', 't');
    var i = 0; //start at the beginning;
    // somewhere in our html file we have the <audio> elements, one for each sound
    $('a#play-all').bind('vclick', function(){  
           //here is our touch/click handler that starts everything up
           var audio = $('audio#' + sounds[i]).get(0);  // get the b sound first

           // event handler goes here!
           $(audio).bind('ended', function(){
              ++i;
              var next = $('audio#' + sounds[i]).get(0);
              next.load(); next.play(); 
           })
           audio.play();  
    }

This code and its variants works perfectly across all major browsers and is a great solution if you will be developing a web app not intended for display on an iOS browser.  On iOS, however, you will not hear the second sound coming through!  If you add more clicks to the application, you get to load another audio file for each click.

After days of struggling with this problem (which I documented on stackoverflow with no success), I found something new to experiment with: audio sprites.  Remember css sprites?  The idea that you load up a single image full of buttons, rounded corners, etc, then find the right portion of the image to display for each part of the page?  Well, why not apply the same content to audio?

Here you create a single audio file, containing all the sounds you will need to play, then seek to the appropriate position.  Results in the upcoming post.



   

Posted in: audio,html5,iOS