Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Audio callback fails on safari/iOS

I have built an app, designed to play each sound as the first one is finished by using 'ended' event.

In my initial version, each sound has its own audio element, resulting in something like:

   function play_next_audio(){
        speaker = $('audio#' + sounds[i++]).get(0);
        speaker.addEventListener('ended',play_next_audio);
        speaker.play();
   }

This works great on all desktop browsers, including Safari, but does not go beyond the very first letter on iOS.

I have also tried a different approach - a single audio element that loads each sound in turn. There I experimented with binding the 'ended' event as well as loading first and binding 'canplaythrough' event instead. In both cases, it fails to work even on the desktop Safari - this time successfully playing the first two letters.

Here is the isolated test:

http://dev.connectfu.com:42001/app/test-sounds.html

Note that audio.load() is commented out several places - having it in or out seems to make no difference.

What am I doing wrong? How can I play series of sounds on iOS? Thank you so much for the help!

like image 466
KateYoak Avatar asked Jun 11 '12 18:06

KateYoak


People also ask

How do I turn off Safari audio on iPhone?

On iPhone or iPad, you can not mute a tab in Safari. On these devices, only the open tab in the foreground can play sound. The only option for muting that sound is to pause or mute using the website's video or audio player controls. Alternatively, you can simply close the tab or mute your device.

Is audio supported in HTML5?

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as speech to text, in the browser.

What will be displayed if browser doesn't support audio tag?

If the browser doesn't support the audio element, then it will display the message, “Sorry, but your browser doesn't support audio.”


1 Answers

update As of 2017, the ended event doesn't fire on Safari (or Chrome) on iOS under several conditions. More information can be found here: It's almost 2017, and HTML5 audio is still broken on iOS.


I've built an HTML5 audio player (Chavah Messianic Radio) that "works" on Safari on iOS.

By "works", I mean, it plays the best it can on Apple's crippled iOS <audio> implementation. At the time of this writing, this includes iOS 5. I've tested this on iPhone 3 and up, and iPad original, iPad 2, and iPad 3.

Here are my findings:

  • Apple does not allow you to call .play on any audio until user interaction. For me, this means detecting iOS, then showing the music as paused until the user clicks play. Their reasoning is that this will consume data and battery; in practice, though, it just cripples web apps and stifles the evolution of the web.
  • If you want to play successive sounds (one after another), use a single element. When it's time to play the next sound, set existingAudio.src, then call existingAudio.load(), then call existingAudio.play(). This will allow you to play successive sounds.
  • Audio events don't fire if Safari is in the background.. While audio will continue playing if the user switches to a different app, the .ended event won't fire. This means it's practically impossible to build a music player app.

Hope this helps.

<rant>

In the meantime: Apple, please, please, please give us better support for HTML5 in iOS Safari. Here are your action items, Apple:

  1. Let HTML5 audio work in the background.
  2. Support OGG.
  3. Support pre-loading audio.
  4. Support concurrent audio.
  5. Let us play audio without user interaction.

Do those things, Apple, you'll be the industry leader in mobile HTML5 audio, everyone will emulate you, you'll once again be leading the way, and web apps will work perfectly on your platforms, while being crippled on other mobile platforms. Yes, these features will use data and the battery, but native apps already do this. Stop crippling web apps and be the leader. Make HTML5 <audio> a first-class citizen on iOS.

</rant>

like image 90
Judah Gabriel Himango Avatar answered Oct 01 '22 04:10

Judah Gabriel Himango