javascript - 如何在两个函数之间来回切换

Question

我正在做一个元素，我目前正在尝试使用音频上下文生成音调。这是我到目前为止的想法:

 $("#btn").click(function(){
    var context = new (window.AudioContext || window.webkitAudioContext)();
    var osc = context.createOscillator(); // instantiate an oscillator
    osc.type = 'sine'; // this is the default - also square, sawtooth, triangle
    osc.frequency.value = 440; // Hz
    osc.connect(context.destination); // connect it to the destination
    osc.start(); // start the oscillator
    osc.stop(context.currentTime + 1);
    })

我从 stackoverflow 得到了解决方案。它完美地呈现了我正在寻找的音调。但是，它只对少于六次激活有效。换句话说，当我点击按钮(id === "btn")超过六次时，它不再发出提示音。

这是 jsFiddle.net 链接，其语法与上述相同 click here

你能帮我解决这个问题吗？

Answer 1

您必须在 osc.stop 之后调用 context.close()。但这并不是那么微不足道，因为如果您之后立即调用它，它甚至不会播放音频，因为它是异步的。

一个解决方案是将它放在 setTimeout 中:

// ...
osc.start();
osc.stop(context.currentTime + 1);
setTimeout(function () {
  osc.close();
}, 1000); // 1000 = 1s used at .stop

或者，您可以同时执行 .stop。和 .close 在 setTimeout 内:

// ...
osc.start();
setTimeout(function () {
  osc.stop(); // note that there is no when argument, i.e. stop immetidately  
  osc.close();
}, 1000);

在我看来，第二种选择更好，因为您不必匹配停止和超时时间。

---

问题中的代码示例，更新为答案:

$("#one").click(function(){
  var context = new (window.AudioContext || window.webkitAudioContext)();
  var osc = context.createOscillator(); // instantiate an oscillator
  osc.type = 'sine'; // this is the default - also square, sawtooth, triangle
  osc.frequency.value = 440; // Hz
  osc.connect(context.destination); // connect it to the destination
  osc.start(); // start the oscillator
  setTimeout(function () {
    osc.stop();
    context.close();
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search">
<button id="one">
hello
</button>