CODEWITHSUNDEEP
ipadhtmlaudio
Tim S.
Tim S.

Reputation: 13853

Playing audio on iPad

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?

Upvotes: 15

Views: 27911

Answers (5)

Chinh Phan
Chinh Phan

Reputation: 1509

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

Upvotes: 1

Jeremiah Isaacson
Jeremiah Isaacson

Reputation: 340

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.

Upvotes: 6

Hendrik
Hendrik

Reputation: 4939

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();
  }

Upvotes: 5

Tim S.
Tim S.

Reputation: 13853

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.

Upvotes: 27

Ian Devlin
Ian Devlin

Reputation: 18870

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.

Upvotes: -1

Related Questions