No audio at all on iOS browsers (audio_test used!)

Monkey Targets Forums/HTML5/No audio at all on iOS browsers (audio_test used!)

rIKmAN

(Posted 2016) [#1]

As per title, after a few hours testing with various audio formats thinking it was that, I decided to try the "audio_test" demo, and found that it also does not play ANY sound at all when viewed through any browser on my iPad.

I tested .ogg, .m4a, .mp3 and not even .wav is working in the audio_test demo in the "mak" folder, and I tested using the iOS versions of Safari, Firefox and Opera all with the same result: no sound at all.

I tested using the latest Monkeyv86e and the HTML5 target.
I also tried setting #HTML5_WEBAUDIO_ENABLED to true/false with no change.

The "audio_test" demo (and my game) play sounds perfectly when using desktop browsers, and I'm not sure if this happens on Android browsers as I have no Android device to test with.

I've hosted it here to make it easy for people to check
As I said it works fine on desktop browsers, but not on my iPad so please check on your iOS device.

Could anyone else please test this and confirm?
Has anyone else had the same problem?
Is it a known bug? Is there a simple fix?

Hopefully Mark sees this.

Thanks.

Pharmhaus

(Posted 2016) [#2]

Well I sadly have no ipad to test for you but have you seen *this*?
If i remember correctly the problem was that apples devices will only play something when a user presses a button or does some kind of other action to the site but the site cannot play sounds on its own. Not sure about other browsers though.

rIKmAN

(Posted 2016) [#3]

Thanks for those links Pharmhaus, I'd seen the official Apple page when Googling but not the Monkey thread.

That is some really bad news - Apple even seem to have blocked the workarounds people were using!
Most of the workarounds mentioned are a few years old, and the Monkey thread you linked is also 4yrs old - are there any more recent workarounds anyone knows of and would be willing to share?

Once initiated on a touch event, I wonder if the "looping" flags still work? (ie. bg music)
Will have to test later on I guess.

Apple suck, this is purely to force people to use the App Store and pay for a dev licence etc.

Thanks again Pharmhaus, especially for the quick reply - much appreciated!

rIKmAN

(Posted 2016) [#4]

the problem was that apples devices will only play something when a user presses a button or does some kind of other action to the site

Just come back to this, and realised that in the audio_test example, you have to press/touch the screen to play each sound - so in theory it should work?

It doesn't though.

Pharmhaus

(Posted 2016) [#5]

Well it has to be attached to an javascript element such as a button if i remember correctly.
In monkey you have the canvas which draws your content but there is no event attached to a button drawn on a canvas if you know what i mean, monkey handles these things internally. Don't know who on hell would come up with a limitation like this?

EDIT:
Its written on the lower part of *this page*

Note: On iOS, the Web Audio API requires sounds to be triggered from an explicit user action, such as a tap. Calling noteOn() from an onload event will not play sound.

Pharmhaus

(Posted 2016) [#6]

Thinking about a workaround, the only thing i could think of would be creating javascript elements like button/textbox hiding (Z-Layering) them using some dirty hack so that they appear below the canvas and then wiring up some events triggering sounds. Not sure if it would work though but maybe worth a try if you have to deliver as html. What kind of html app are we talking about by the way?

Leginus

(Posted 2016) [#7]

We used the howler.js library for sound, which is excellent and free, but the get around they use for the ios issue is the following..

  /**
     * iOS will only allow audio to be played after a user interaction.
     * Attempt to automatically unlock audio on the first user interaction.
     * Concept from: <a href="http://paulbakaus.com/tutorials/html5/web-audio-on-ios/" target="_blank">http://paulbakaus.com/tutorials/html5/web-audio-on-ios/</a>
     * @return {Howler}
     */
    _enableiOSAudio: function() {
      var self = this;

      // only run this on iOS if audio isn't already eanbled
      if (ctx && (self._iOSEnabled || !/iPhone|iPad|iPod/i.test(navigator.userAgent))) {
        return;
      }

      self._iOSEnabled = false;

      // call this method on touch start to create and play a buffer,
      // then check if the audio actually played to determine if
      // audio has now been unlocked on iOS
      var unlock = function() {
        // create an empty buffer
        var buffer = ctx.createBuffer(1, 1, 22050);
        var source = ctx.createBufferSource();
        source.buffer = buffer;
        source.connect(ctx.destination);

        // play the empty buffer
        if (typeof source.start === 'undefined') {
          source.noteOn(0);
        } else {
          source.start(0);
        }

        // setup a timeout to check that we are unlocked on the next event loop
        setTimeout(function() {
          if ((source.playbackState === source.PLAYING_STATE || source.playbackState === source.FINISHED_STATE)) {
            // update the unlocked state and prevent this check from happening again
            self._iOSEnabled = true;
            self.iOSAutoEnable = false;

            // remove the touch start listener
            window.removeEventListener('touchstart', unlock, false);
          }
        }, 0);
      };

      // setup a touch start listener to attempt an unlock in
      window.addEventListener('touchstart', unlock, false);

      return self;
    }
  };

rIKmAN

(Posted 2016) [#8]

Sorry for the late reply to this.

@Pharmaus:
I've not tested it yet but I've spoken to the author of Mungo and he has confirmed that this won't be an issue when using it, all sounds will play normally after the first user input/action so I will be testing that in the next week or so and if all is well I'll be using that going forward.

I used his HTML5 Web-GL target anyway, but didn't realise it was still being updated as Mungo which is great news and is compatible with existing Monkey code - even better! :)

@Leginus:
Thanks for that code snippet, very helpful!
I assume this is similar to what Mungo is doing to achieve the same result, but more methods to fix a problem is never a bad thing. :)

maverick69

(Posted 2016) [#9]

I've also stumbled upon that issue and here is very simple workaround that should work.

Edit the MonkeyGame.html, after the line

window.onload=function( e ){

	var canvas=document.getElementById( "GameCanvas" );

attach the remaing code to a click event listener, like:

	canvas.addEventListener("click", function() {

		var splitter=document.getElementById( "Splitter" );
		var console=document.getElementById( "GameConsole" );
                ...
       });

Now you have to click into the canvas to start, but at least the sound stuff is working.