iOS 7: Audio only plays in Safari, not Web App

Question

I'm trying to build an iOS Webapp that uses audio. While it has been a very fickle endeavor, I finally managed to get it to work in Safari Mobile (interestingly enough it worked in chrome mobile a long time before, I don't know why…). Yet when I save it as a webapp on the home screen, the audio stops working mysteriously…

Here is the audio code. window.helpers.gongis a base64 encoded mp3 file.

I checked the console output in the webapp via the desktop safari, yet there are no errors thrown.

Any ideas what might be going wrong?

window.helpers.audio = {
  myAudioContext: null,
  mySource: null,
  myBuffer: null,
  init: function() {
    if ('AudioContext' in window) {
      this.myAudioContext = new AudioContext();
    } else if ('webkitAudioContext' in window) {
      this.myAudioContext = new webkitAudioContext();
    } else {
      alert('Your browser does not support yet Web Audio API');
    }

    var self = this;

    var load = (function (url) {

      var arrayBuff = window.helpers.Base64Binary.decodeArrayBuffer(window.helpers.gong);

      self.myAudioContext.decodeAudioData(arrayBuff, function(audioData) {

        self.myBuffer = audioData;

      });

    }());
  },
  play: function() {
    this.mySource = this.myAudioContext.createBufferSource();
    this.mySource.buffer = this.myBuffer;
    this.mySource.connect(this.myAudioContext.destination);

    if ('AudioContext' in window) {
      this.mySource.start(0);
    } else if ('webkitAudioContext' in window) {
      this.mySource.noteOn(0);
    }
  }
};

The code is called like this on load:

window.helpers.audio.init();

And later it is triggered through user action:

...
$('#canvas').click(function() {
  if(this.playing == false) {
    window.helpers.audio.play();
  }
}.bind(this));
...

Answer 1

Ouch, the answer was blindingly simple:

I had the mute switch on the side of the iPhone set to mute the whole time.

So it turns out that safari plays audio even when the switch is on mute, yet when you save it as a web app, it doesn't work anymore.

Answer 2

If I understand correctly the audio works on desktop Safari, and not on mobile Safari?

This could be a result of a limitation placed on mobile Safari that requires any sound that is played to be a triggered in a user action (for example, a click).

Read more here: http://buildingwebapps.blogspot.com/2012/04/state-of-html5-audio-in-mobile-safari.html