jQuery touch move上的Web音频api不工作iOS

Web audio api on jQuery touch move not working iOS

本文关键字:api 工作 iOS 音频 Web touch move 上的 jQuery      更新时间:2023-09-26

我的代码:

$(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;
}

这在android上的chrome和Firefox中工作,但在iOS上的safari或chrome中没有声音播放。web音频api确实在safari中工作,因为我使用了一个更简单的脚本进行了测试,'touchmove'似乎可以工作,因为坐标出现在# cods中。

谢谢。

我正在处理一个类似的问题。当谈到"自动启动"音频的可能性时,iOS上的WebKit非常挑剔。

在"touchstart"事件上初始化AudioContext在我的iOS 10.1.1的iPhone SE上奏效了:

$(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;
}