tone.js:如何知道triggerRelease何时完成

Question

我想在便条播放完tone.js后更新我的UI

const now = Tone.now()
synth.triggerAttack("G3", now);
synth.triggerRelease("G3", now + 60 / this.tempo)

如何获得回调或将侦听器添加到triggerRelease以便更新UI？

Answer 1

我从未使用过这个库，但是回顾它的文档，似乎API定义了一个可以用于您的目的的onsilence回调。

您可以在实例传递适当的配置选项时提供该回调。

const synth = new Tone.Synth({
  onsilence: () => console.log('I am invoked after the release has finished') // update the UI as appropriate
}).toDestination();
const now = Tone.now()
synth.triggerAttack("G3", now);
synth.triggerRelease(now + 60 / this.tempo);

API还提供了一些与它相关的测试。

正如您在评论中所指出的，onsilence回调似乎只在乐器完全保持沉默时才被调用，但在音符结束时需要执行一些操作。

可能的方法是使用库提供的不同的事件。

库文档提供了演示如何使用它们的不同的相关实例。

例如，回顾一下这一个和配套的wiki页面，它们试图解释如何同步可视化，或者这个另一个，接近您要寻找的每个音符回调。

这两个例子可以在tone.js存储库中找到。

考虑到这些，例如，考虑到这段代码，基于在描述事件和上述条款中提供的关于性能和如何同步可视化的代码片段时提供的第二个示例：

import * as Tone from 'tone';

const synth = new Tone.Synth().toDestination();
// use an array of objects as long as the object has a "time" attribute
const part = new Tone.Part(
  (time, value) => {
    // the value is an object which contains both the note and the velocity
    synth.triggerAttackRelease(value.note, '8n', time);

    Tone.Draw.schedule(function () {
      //this callback is invoked from a requestAnimationFrame
      //and will be invoked close to AudioContext time
      document.getElementById('app').innerHTML += ' ' + value.note;
    }, time);
  },
  [
    { time: 0, note: 'C3' },
    { time: '0:2', note: 'C4' },
  ]
).start(0);
Tone.Transport.start();

请在Stackblitz中重新加载预览页面，您应该会看到每一个注释。

最后，如果需要访问注释中所示的父上下文this对象，则有几种方法:确切的方式将取决于实际代码。请考虑一下，比如回顾一下这个相关的所以问题，我认为它是有帮助的。