玩弄 audioContext

Question

受到这个 SO answer 的启发，我有这段代码，它可以工作，但它会弹出并且听起来不太流畅。

$('.btn').each(initDraggable);
function initDraggable() {
 var param = {}
 param.drag = drag
 param.stop = stopper
 $(this).draggable(param)
}
var Variables = {}
Variables.Frequency = 0
function drag(myEvent,myUI) {
 var Frequency = myUI.position.left + 100
 var Duration = 5000
 if (Math.abs(Variables.Frequency-Frequency) > 25) {
  if (typeof(Variables.osc) === 'undefined') {
  } else {
   Variables.osc.stop(0)
  }
  Variables.Frequency = Frequency
  Oscillator(Frequency,Duration)
 }
}
function stopper() {
 Variables.osc.stop(0)
}


Variables.ctx = new(window.audioContext || window.webkitAudioContext)
function Oscillator(argFrequency,argDuration) {
 Variables.osc = Variables.ctx.createOscillator()
 Variables.osc.type = 0
 Variables.osc.connect(Variables.ctx.destination)
 Variables.osc.frequency.value = argFrequency
 Variables.osc.start(0)
 setTimeout(myTimeout,argDuration)
 function myTimeout() {
  Variables.osc.stop(0)
 }
}

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css">
<span class="btn btn-primary">Drag me</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.touch-punch/latest/jquery.ui.touch-punch.js"></script>

问：有没有什么简单的方法可以让它听起来更流畅一些？

Answer 1

无需在 drag 上重新创建 oscillator，我认为这就是造成流行音乐的原因。但是您可以更改已启动 oscillator 的 frequency value，因此您可以通过在拖动 start 时创建振荡器来实现您的结果，在 stop 时停止它，然后简单地更改drag 上的频率值。像这样：

$('.btn').each(initDraggable);

function initDraggable() {
  var param = {}
  param.drag = drag
  param.stop = stopper
  param.start = startOsc
  $(this).draggable(param)
}
var Variables = {}
Variables.Frequency = 0

function drag(myEvent, myUI) {
  var Frequency = myUI.position.left + 100
  var Duration = 5000
  if (Math.abs(Variables.Frequency - Frequency) > 25) {
    //You could put some validation on creation, but since you're not creating it, it's not necessary here 
    /*if (typeof(Variables.osc) === 'undefined') {
  } else {
   Variables.osc.stop(0)
  }*/

    Variables.Frequency = Frequency;
    //Oscillator(Frequency,Duration)
    Variables.osc.frequency.value = Frequency;
  }
}

function startOsc(myEvent, myUI) {
  var Frequency = myUI.position.left + 100
  Oscillator(Frequency) //Since it plays in continue you don't need duration
}

function stopper() {
  Variables.osc.stop(0)
}


Variables.ctx = new(window.AudioContext || window.webkitAudioContext)

function Oscillator(argFrequency /*,argDuration*/ ) {
  Variables.osc = Variables.ctx.createOscillator()
  Variables.osc.type = 0
  Variables.osc.connect(Variables.ctx.destination)
  Variables.osc.frequency.value = argFrequency
  Variables.osc.start(0)
    /*setTimeout(myTimeout,argDuration)
 function myTimeout() {
  Variables.osc.stop(0)
 }*/
}

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css">
<span class="btn btn-primary">Drag me</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.touch-punch/latest/jquery.ui.touch-punch.js"></script>

玩弄 audioContext

Playing around with audioContext

javascript

webkitaudiocontext

audiocontext