CODEWITHSUNDEEP
javascriptiosiphoneweb-audio-api
Allen Liu
Allen Liu

Reputation: 4038

Web Audio API demo doesn't work on iOS

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.

Upvotes: 1

Views: 3113

Answers (3)

user7951676
user7951676

Reputation: 367

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>

Upvotes: 1

Allen Liu
Allen Liu

Reputation: 4038

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

Upvotes: 16

Stephen Taylor
Stephen Taylor

Reputation: 23

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.

Upvotes: 1

Related Questions