时间戳

首页 > 解决方案 > 无法切换 ToneJS 振荡器的 start()/stop()

javascript - 无法切换 ToneJS 振荡器的 start()/stop()

问题描述

我将一些 JS 与 ToneJS 库拼凑在一起，以打开/关闭一些声音。

function togglePlay() {
  const status = Tone.Transport.state; // Is either 'started', 'stopped' or 'paused'
  const element = document.getElementById("play-stop-toggle");
  if (status == "started") {
    element.innerText = "PLAY";
    Tone.Transport.stop()
  } else {
    element.innerText = "STOP";
    Tone.Transport.start()
  }

  document.querySelector('#status').textContent = status;
}


var filter = new Tone.Filter({
  type: 'lowpass',
  Q: 12
}).toMaster()



var fmOsc   = new Tone.AMOscillator("Ab3", "sine", "square").toMaster()
var fmOsc2  = new Tone.AMOscillator("Cb3", "sine", "square").toMaster()
var fmOsc3  = new Tone.AMOscillator("Eb3", "sine", "square").toMaster()

var synth   = new Tone.MembraneSynth().toMaster()

//create a loop
var loop = new Tone.Loop(function(time){
//    synth.triggerAttackRelease("A1", "8n", time)
//    fmOsc.start()
    fmOsc2.start()
    fmOsc3.start();
}, "4n")


//play the loop between 0-2m on the transport
loop.start(0)
// loop.start(0).stop('2m')

在里面loop我有一个鼓点，我目前已经注释掉了。当它被注释时，该togglePlay()函数将按预期启动和停止它。

但是，fmOsc2andfmOsc3函数将在我切换开始时启动，但在我切换停止时不会终止。

作为参考，下面是 HTML 端的样子：<div class="trackPlay" id="play-stop-toggle" onclick="togglePlay()">PLAY</div>

如何获得fmOsc2和fmOsc3功能以切换按钮状态？

标签： javascripttone.js

解决方案

Tone Transport不打算以这种方式使用，用于启动或停止振荡器（当然，它可以启动/停止振荡器，但我不认为它正在做你想要做的事情）:-)

如果您console.log在传递给的函数中添加 a Tone.Loop，您将看到它被重复调用，即，您fmOsc.start()一遍又一遍地调用。（尽管如此重复鼓点确实很有意义Loop）

调用Tone.Transport.stop()不会停止振荡器——它只会停止Loop/ 传输功能（即“计时”）。鼓声很明显——按下Stop你的 UI 会杀死鼓声，但振荡器会继续振荡。

停止振荡器的最简单/最直接（也是唯一？）的方法是调用.stop()它们：

  if (status == "started") {
    element.innerText = "PLAY";
    Tone.Transport.stop()
    fmOsc2.stop()
    fmOsc3.stop()
  } else {
    // ... [snip] ...

推荐阅读