API веб-аудио на JQuery прикосновением двигаться не работает IOS

Question

Вот мой код:

$(document).ready(function(){ 

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'; 
gainNode.gain.value = 0; 
oscillator.start(); 

document.addEventListener("touchmove", function(e) { 
    e.preventDefault(); 
    var touch = e.touches[0]; 
    var x = touch.pageX; 
    var y = touch.pageY; 
    x = Math.round(x); 
    y = Math.round(y); 

    x = mRound(x, 20); 
    y = mRound(y, 10); 

    $("#coords").text(x + ", " + y); 

    gainNode.gain.value = x/10; 
    oscillator.frequency.value = y; 

}, false); 

}); 

function mRound(n, m){ 

if(n > 0) 
    return Math.ceil(n/m) * m; 
else if(n < 0) 
    return Math.floor(n/m) * m; 
else 
    return m; 

} 

Это работает в хроме и Firefox на андроид, но без звука играет в сафари или хромом на прошивкой. Веб-аудио api работает в сафари, потому что я тестировал его, используя гораздо более простой скрипт, и «touchmove», похоже, работает, потому что координаты появляются в #coords.

Спасибо.

Answer 1

Я работаю над аналогичной проблемой. WebKit на iOS очень придирчив, когда речь заходит о возможности «автозапуска» аудио.

Инициирование AudioContext на "touchstart" событие сделал трюк на моем iPhone SE с прошивкой 10.1.1:

$(document).ready(function(){ 
    var oscillator, gainNode, audioCtx; 

    var initOnce = false; 

    document.addEventListener("touchstart", function(e) { 
    if (!initOnce){ 
     initOnce = true; 
     audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
     oscillator = audioCtx.createOscillator(); 
     gainNode = audioCtx.createGain(); 
     oscillator.connect(gainNode); 
     gainNode.connect(audioCtx.destination); 
     oscillator.type = 'sine'; 
     gainNode.gain.value = 0; 
     oscillator.start(); 
    } 
    }); 

    document.addEventListener("touchmove", function(e) { 
     e.preventDefault(); 
     var touch = e.touches[0]; 
     var x = touch.pageX; 
     var y = touch.pageY; 
     x = Math.round(x); 
     y = Math.round(y); 

     x = mRound(x, 20); 
     y = mRound(y, 10); 

     $("#coords").text(x + ", " + y); 

     gainNode.gain.value = x/10; 
     oscillator.frequency.value = y; 

    }, false); 

}); 

function mRound(n, m){ 

if(n > 0) 
    return Math.ceil(n/m) * m; 
else if(n < 0) 
    return Math.floor(n/m) * m; 
else 
    return m; 

}