Web Audio API on iPad

I am unable to play any audio through Web Audio API on iPad. This is using the latest version of iOS (since 9.3.2 - currently 9.3.3).


Here is a bare-bones test I have set up (code below). None of the tests work on iPad for me. No problems on iPhone or other compatible browsers.


The Apple documentation makes it clear that audio must be initiated from a user action for Web Audio API to work. They state:


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.


There are a number of threads online about problems with this, the latest being autumn 2015 with iOS 9.0 to 9.2:


- Thread from HTML 5 Game Devs (autumn 2015 problems)

- William Malone (autumn 2015 problems)

- Paul Bakaus (unlocking techniques)

- Adrian Holovaty (autumn 2015 problems)


They suggest firing audio from a touchstart event to unlock iOS audio (or touchend while there were issues at that time). I have tried all of the suggested techniques and can't get touchstart, touchend or click to work. The audio is always muted on iPad.


There is another test page here (from William Malone). None of those sounds play on three iPads tried. Finally this game uses Web Audio API (thanks Derek) and is also muted.


Any insights or feedback would be much appreciated!


Here is the test code:


<!DOCTYPE html>

<html>

<head>

<title>Web Audio API - iPad Test</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="./jquery-2.2.3.min.js"></script>

<style>

section { padding:10px; margin:0 0 10px; background:DarkSeaGreen }

a { cursor:pointer; display:block; background: DarkSeaGreen; padding:10px; margin:0 0 3px }

</style>

</head>

<body>

<script>

var app = {};

$(document).ready(function() {

// Do we have Web Audio API?

try {

window.AudioContext = window.AudioContext || window.webkitAudioContext;

audioContext = new AudioContext();

} catch (e) {

alert('Web Audio API is not supported in this browser');

}

$('#loadClick').on('click',function(){load('./ipad_test.mp3')});

$('#playTouchEnd').on('touchend',play);

$('#playTouchStart').on('touchstart',play);

$('#playClick').on('click',play);

$('#unlockTouchEnd').on('touchend',unlock);

$('#unlockTouchStart').on('touchstart',unlock);

$('#unlockClick').on('click',unlock);

});

function unlock() {

// play empty buffer to unmute audio

var buffer = audioContext.createBuffer(1, 1, 22050);

var source = audioContext.createBufferSource();

source.audioContext = buffer;

source.connect(audioContext.destination);

source.start(0);

$('#messages').append('<p>Unlocked.</p>');

}

function load(file) {

if(app.loaded) {

$('#messages').append('<p>Already loaded.</p>');

return;

}

var request = new XMLHttpRequest();

request.open ('GET', file, true);

request.responseType = 'arraybuffer';

request.onload = function () {

audioContext.decodeAudioData(

request.response,

function (buffer) {

app.buffer = buffer;

$('#messages').append('<p>Loaded.</p>');

app.loaded = 1;

},

function(){alert('Load error.');}

)

};

request.send();

}

function play() {

if(!app.loaded) {

$('#messages').append('<p>Please load before playing.</p>');

return;

}

var sourceNode = audioContext.createBufferSource();

sourceNode.buffer = app.buffer;

sourceNode.connect (audioContext.destination);

sourceNode.start(0);

$('#messages').append('<p>Playing.</p>');

}

</script>

<h1>Web Audio API Test</h1>

<p>Unlock should not be needed at all, but offers an alternative way to try and get the audio going. Load and then play should be all any compatible device needs. Refresh to start again.</p>

<a id="unlockTouchEnd">Unlock (touchend)</a>

<a id="unlockTouchStart">Unlock (touchstart)</a>

<a id="unlockClick">Unlock (click)</a>

<a id="loadClick" style="background:#c0c0c0">Load (click)</a>

<a id="playTouchEnd">Play Audio (touchend)</a>

<a id="playTouchStart">Play Audio (touchstart)</a>

<a id="playClick">Play Audio (click)</a>

<section id="messages"></section>

</body>

</html>

Accepted Reply

This was fixed in the second build of iOS 10.1.1. iPad now plays Web Audio API again, but didn't from 9.3.2 to the first build of 10.1.1. Thanks.

Replies

I have overhauled this question to add a lot more information. Any help would be much appreciated, as this problem continues in iOS 9.3.3 on iPad for some devices.

This was fixed in the second build of iOS 10.1.1. iPad now plays Web Audio API again, but didn't from 9.3.2 to the first build of 10.1.1. Thanks.

Good info, thanks for the followup.


Ken

Dear all


I am developing an App that uses the Web Audio API. This app and others that I created in the past were working perfectly both in Chrome (PC) and Safari IOS, last year. But suddenly since a while ago nothing Web Audio API related works on my IPAD. Sometimes sounds come out and then suddenly they stop and never return. Really insane. I read that this has been fixed in the second build of 10.1.1. but I do have the latest updated version and I continue having the problem. I take this opportunity to say that compared to Chrome, testing on Safari is a nightmare, not just because of this issue but because of many others (no support for color input type, etc, etc, etc, etc, etc). I have the feeling that Apple doesn't care much about web development, that's my impression as a web developer (maybe that explains that Safari has 5% of the market and Chrome 75%).

But back to the Web Audio API mess. My IPAD has the latest 10.1.1 and nothing works related to web sound. Any tips? advice? help? info?

thank you so much 😉

This is wrong, problems continue to happen even with the latest 10.1.1,

in my view, Safari is the new "Internet Explorer"



I am developing an App that uses the Web Audio API. This app and others that I created in the past were working perfectly both in Chrome (PC) and Safari IOS, last year. But suddenly since a while ago nothing Web Audio API related works on my IPAD. Sometimes sounds come out and then suddenly they stop and never return. Really insane. I read that this has been fixed in the second build of 10.1.1. but I do have the latest updated version and I continue having the problem. I take this opportunity to say that compared to Chrome, testing on Safari is a nightmare, not just because of this issue but because of many others (no support for color input type, etc, etc, etc, etc, etc). I have the feeling that Apple doesn't care much about web development, that's my impression as a web developer (maybe that explains that Safari has 5% of the market and Chrome 75%).

But back to the Web Audio API mess. My IPAD has the latest 10.1.1 and nothing works related to web sound. Any tips? advice? help? info?

thank you so much

this seems to be an issue for my app in 10.2. Have you found a way to resolve this?


For me, my application appears to work fine in development but not in production.

I was having this issue and it was driving me nuts. I was trying to play some generated sounds on a timer via the WebAudio API and it was working everywhere but iOS devices. As previously mentioned, per this:


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.


You need to flip the audioContext.state to "running" rather than "suspended" via a user interaction. I solved this by simply having an initial play/start button that creates the audioContext and plays a sound. All subsequent sounds triggered by a timer then played correctly.


Why Apple is supposedly guarding users from potentially annoying sounds on iPad and iPhone but not desktop browsers, I have no idea.


My iPad is running 11.2.6 btw.