15

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?

5 Answers 5

27

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.

4
  • 4
    Gah, come on Apple, the user action is loading the web page, so two user actions are required (loading a page, then doing something else). Same problem with trying to trigger the native keyboard. Jan 12, 2013 at 4:13
  • @Tim S: Are you saying that, for a given web page: once the user loads the page then clicks the play button that you could then play audio whenever you like on that page? say, in response to a mouseover event? Mar 24, 2013 at 19:28
  • 1
    A sound won't play or pre-cache if it's not triggered by an user event. So I guess you can use an hover event to play or load a sound, yes. Please don't forget that you can't hover on touch-screens.
    – Tim S.
    Mar 25, 2013 at 8:37
  • I have understood this thing, but with my code the repetition of the sounds does not work. I opened a question here if you can help me: stackoverflow.com/questions/73716844/…
    – Luca
    Sep 16, 2022 at 7:51
6

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.

0
5

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();
  }
1
  • 7
    I stumbled across this problem and found a way to solve it. Then decided to post the code I use to help others.
    – Hendrik
    Sep 12, 2012 at 19:22
1

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

-1

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.

7
  • Unfortunately, both didn't work. Thanks for your answer though.
    – Tim S.
    Nov 18, 2011 at 14:23
  • Odd. Have you verified that it works on a desktop browser? So you can ensure the paths to the audio files are correct?
    – Ian Devlin
    Nov 18, 2011 at 15:08
  • 1
    I can certainly confirm it did work on Desktop. Also, the sound if the iPad is in fact on, haha!
    – Tim S.
    Nov 18, 2011 at 16:09
  • So that was the issue? :-) Glad you got it sorted!
    – Ian Devlin
    Nov 18, 2011 at 16:29
  • I didn't sort anything! It still doesn't work unfortunately... I'm just saying that it works on desktop and not on iPad.
    – Tim S.
    Nov 21, 2011 at 9:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.