Web Audio API demo doesn't work on iOS

Question

I'm currently working on adapting this web audio API demo for a project that I am working on, but there is no sound when I test on an iPhone. It works fine on the iPad.

I've searched for solutions and found this thread on StackOverflow with the following snippet of one of the answers:

Safari on iOS 6 effectively starts with the Web Audio API muted. It will not unmute until you attempt to play a sound in a user input event (create a buffer source, connect it to destination, and call noteOn()). After this, it unmutes and audio plays unrestricted and as it ought to. This is an undocumented aspect of how the Web Audio API works on iOS 6 (Apple's doc is here, hopefully they update it with a mention of this soon!)

The user input event should be the onclick event on the play button but changing to use noteOn() instead of start() still doesn't fix it.

Update: I've also tried binding the play button with the touchend event but to no avail.

Here is the function that uses noteOn():

function playNote(buffer, pan, x, y, z, sendGain, mainGain, playbackRate, noteTime) {
    // Create the note
    var voice = context.createBufferSource();
    voice.buffer = buffer;
    voice.playbackRate.value = playbackRate;

    // Optionally, connect to a panner
    var finalNode;
    if (pan) {
        var panner = context.createPanner();
        panner.panningModel = "HRTF";
        panner.setPosition(x, y, z);
        voice.connect(panner);
        finalNode = panner;
    } else {
        finalNode = voice;
    }

    // Connect to dry mix
    var dryGainNode = context.createGain();
    dryGainNode.gain.value = mainGain * effectDryMix;
    finalNode.connect(dryGainNode);
    dryGainNode.connect(masterGainNode);

    // Connect to wet mix
    var wetGainNode = context.createGain();
    wetGainNode.gain.value = sendGain;
    finalNode.connect(wetGainNode);
    wetGainNode.connect(convolver);

    if (iOS) {        
        voice.noteOn(noteTime);    
    }
    else {
        voice.start(noteTime);
    }
}

Any suggestions would be greatly appreciated. Thanks.

I've added the function that calls the noteOn() but the codebase is quite large. The project is on Github at https://github.com/cwilso/MIDIDrums — Allen Liu, Sep 02 '17 at 05:41
The original demo is here and it doesn't work on the iPhone either. http://webaudiodemos.appspot.com/MIDIDrums/index.html — Allen Liu, Sep 02 '17 at 05:43

score 12 · Accepted Answer · answered Sep 05 '17 at 21:12

12

I feel really stupid. Apparently, if you have your iPhone on vibrate mode, the sound doesn't play.

answered Sep 05 '17 at 21:12

Allen Liu

3,948
8
35
47

1

This answer just saved me hours and hours of fruitless debugging. Thanks! – oscaralexander Aug 31 '20 at 19:24
1

I found this answer _after_ hours and hours of fruitless debugging. Thanks! – Rob Keniger Jul 28 '22 at 07:27

score 1 · Answer 2 · edited Jun 30 '18 at 19:28

The start() method should work fine without the if else statements on iOS as long as you call the function with a user interaction event. Also flip the order you pass y and z to the panner cause z is second for some strange reason. Here's a working example, change stuff in it to fit what you need, most isn't need and I've got others somewhere that use the dom to add event listeners

<script>
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var oscillator = audioCtx.createOscillator();
    var gainNode = audioCtx.createGain();
    oscillator.connect(gainNode); 
    gainNode.connect(audioCtx.destination);
    oscillator.type = 'sine'; 
    oscillator.frequency.value = 440;

    gainNode.gain.value = 1;
</script>
<button onclick="oscillator.start();">play</button>

Thanks. I'll remove that logic and fix the y and z. Here is the method that uses the playNote() function to bind the play button: document.getElementById('play').addEventListener('touchend', handlePlay, true); — Allen Liu, Sep 02 '17 at 06:16

score 0 · Answer 3 · answered Sep 04 '17 at 20:39

My own experience has been that sometimes the Web Audio API works on iPhones, sometimes it doesn't. Here is a page that worked 5 minutes ago on my iPhone 6s; 1 minute ago it didn't work; now it does again!

http://www.stephenandrewtaylor.net/dna-sonification/

Here is another one that works intermittently; it worked 2 minutes ago and now it doesn't (the animations work, there is just no audio).

http://www.stephenandrewtaylor.net/lie-sonification/

It might have to do with how many tabs are open in Safari; you could try closing some of your open tabs (right now I have 5 tabs, including the lie-sonificaton page which worked 2 minutes ago but now doesn't). I am also a novice programmer and I'm sure there are much better ways I could be writing the code.

Web Audio API demo doesn't work on iOS

3 Answers3