Why won't web audio api oscillator play in Safari Mobile?

Question

I have been trying to get an oscillator to play in a mobile browser on IOS (won't work in Chrome or Safari) and I am struggling. From the research I have done I have found that you must create the oscillator (and maybe even the context) on a touch event. What I have working on desktop is an oscillator that connects to a gain node and plays a sound on a mouseenter event on a span element. Then on a mouseout event it disconnects from the gain node so that on the next mouseenter event it will connect again thus being able to create a new sound every time a character is hovered on.

$(".hover-letters span").on("touchend mouseenter", function(){
    audioVariables($(this));
});

$(".hover-letters span").on("touchstart mouseout", function(){
    oscillator.disconnect(gainNode);
});

function audioVariables(element){
    resizeWindowWidth = parseInt($(window).width());
    frequency = mouseX/(resizeWindowWidth/600);     
    type = element.parent().data("type");
    sound();
}

var firstLetterInteraction = true;  

function sound() {
  if (firstLetterInteraction === true){
    audioCtx = new(window.AudioContext || window.webkitAudioContext)();
    oscillator = audioCtx.createOscillator();
    gainNode = audioCtx.createGain();
    oscillator.start();
  }

  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  oscillator.frequency.value = frequency;
  oscillator.type = type;

  firstLetterInteraction = false;
};

For some reason the sound just won't play on IOS and is not showing any errors. I'm beginning to wonder if this is possible as even examples such as CaptureWiz example here:

How do I make Javascript beep?

and the example given on the Web Audio API site: http://webaudioapi.com/samples/oscillator/ do not work for me on mobile. Anybody have any ideas?

Can you edit your question to show us what you already tried so far, so that we can maybe help tweak the code? — stefanobaghino, Jun 12 '17 at 07:34

score -1 · Answer 1 · edited Jul 31 '17 at 01:10

-1

This works for the oscillator

<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 = 300;
  gainNode.gain.value = 7.5;
</script>

<button onclick="oscillator.start();">play</button>

edited Jul 31 '17 at 01:10

Johan Karlsson

494
5
7

answered Jul 04 '17 at 02:19

user7951676

377
2
10

this code does not work on Safari iOS 11 https://bl.ocks.org/clhenrick/raw/1d5d49c7a6573ad6a7095518c393ae0b/e6161675fe94c2469883820c6a6cf0fd8651d213/ – clhenrick Jan 07 '18 at 18:03
I'll edit it later, thank you it was an older post before iOS 11 – user7951676 Jan 07 '18 at 21:02

Why won't web audio api oscillator play in Safari Mobile?

1 Answers1