jQuery 上的网络音频 api 触摸移动不起作用 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;

}

这在 chrome 和 android 上的 Firefox 中有效，但在 iOS 上的 Safari 或 chrome 中没有声音播放。网络音频 api 在 safari 中确实有效，因为我使用更简单的脚本对其进行了测试，并且 'touchmove' 似乎有效，因为坐标出现在 #coords.

谢谢。

Answer 1

我正在处理类似的问题。 iOS 上的 WebKit 对 "autostarting" 音频的可能性非常挑剔。

在 "touchstart" 事件上启动 AudioContext 在我的 iPhone SE 和 iOS 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;

}

jQuery 上的网络音频 api 触摸移动不起作用 iOS

Web audio api on jQuery touch move not working iOS

javascript

jquery

ios

web-audio-api