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

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

Try putting the MP3 as the first source rather than the second one. The iPad used to have an issue where it always played the first source no matter what (it might have been fixed by now though - but it's worth a try).

Also try changing the type to audio/mp3.

Answer 4

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 5

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