Playing audio on iPad

Question

I'm working on a website that has a chat for a client, however, we're experiencing problems with audio in iPad (iOS 5).

The target is in fact the iPad with support for IE7 is preferred.

I've tried these approaches:

HTML5

<audio id="notification" preload="auto">
    <source src="audio/notification.ogg" type="audio/ogg" />
    <source src="audio/notification.mp3" type="audio/mpeg" />
</audio>

With some javascript

var el = document.getElementById('notification');
el.play();

---

Some javascript function I stole somewhere which in fact are two different methods in one function. Please note the script is in a subdir, so the path is correct.

function notify() {
    var url = '../audio/notification.mp3';
    var a = document.createElement('audio');

    if(!!(a.canPlayType && a.canPlayType('audio/mpeg').replace(/no/, ''))) {
        var sound = new Audio(url);
        sound.load();
        sound.play();
    } else {
        $('#notification').remove();
        var sound = $('<embed id="notification" type="audio/mpeg" src="'+url+'" loop="false" hidden="true" autostart="true" />');
        $(body).append(sound);
    }
}

Both methods doesn't seem to work. Am I doing something wrong?

Answer 1

Well, the answer was somewhat obvious.

After a lot of time spending doing research etc, I've found an article in the official documentation of Safari saying:

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

So, basically, you can't launch a sound without the user triggering it at first. As solution I created a mute button that is off on default, so you have to click it which plays the notification sound. Afterwards I can use Javascript to play the sound without user interaction.

Thank you Safari for this great future. Thanks a lot.

Answer 2

With the release of iOS 6 for iPad audio playing during an onLoad is still not supported for iPad.

For iPhones with iOS 6 audio will only play during an html site's onLoad if there are headphones plugged into the audio jack on the iPhone.

Answer 3

The Apple iPad does not allow playing sounds without a user click previously initiating it.

Solution: Add a play/pause button.

App.toggle_audio = function(elem) {
  var icon = elem.find("i");
  var playing = _.include(icon.attr('class').split(" "), "icon-pause")
  if (playing) {
    elem.html("<i class='icon-play'></i> " + App.translate_play_audio);
    App.play_audio_toggle = false;
  } else {
    App.audio_file.load();
    elem.html("<i class='icon-pause'></i> " + App.translate_pause_audio);
    App.play_audio_toggle = true;
  }
}

Once the user clicked the button once the Audio is loaded. You can then play it via Javascript.

  if (App.play_audio_toggle) {
    App.audio_file.play();
  }

Answer 4

Source code(version simple)

HTML

 <div id="enableSound"> Enable Sound</div>

JS

var sound = new Audio("/Assets/audio/yourAudio.mp3");;
 $("#enableSound").click(function() {
     sound.play();
  });

User has to click on div "#enableSound", from that moment on whenever you want to play above sound, just call

sound.play()

http://jsbin.com/virixukavo/1/edit?html,js,output