angular - 如何在 Angular 中使用 Tone.js UI 显示键盘？

Question

在一个Angular 7应用程序中，我安装了Tone.js依赖项：

npm install tone
npm install @tonejs/ui

我可以弹奏音符，我想使用我在这个小提琴tone-keyboard中看到的元素来显示键盘

我的synth.component.html文件包含：

<tone-demo autoplay>
  <tone-keyboard octaves="3"></tone-keyboard>
</tone-demo>

我的synth.component.ts文件包含：

import { Component, OnInit } from '@angular/core';
import Tone from 'tone';

但我收到以下错误：

Error: : 'tone-keyboard' is not a known element:

我应该在文件中有一些额外import的声明吗？synth.component.ts

Answer 1

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

//play a 'C' for one 8th note
synth.triggerAttackRelease('C4', '8n')


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

startNote = (event) => {
   synth.triggerAttack(event.target)
}

endNote = (event) => {
   synth.triggerRelease()
}

//Mouse click starts the note 
<Button onMouseDown={this.startNote}/>

//Mouse click ends the note 
<Button onMouseUp={this.endNote}/>





var jakeSynth = new Tone.Synth({
  oscillator : {
    type : 'fmsquare',
        modulationType : 'sawtooth',
        modulationIndex : 3,
        harmonicity: 3.4
  },
  envelope : {
    attack : 0.001,
        decay : 0.1,
        sustain: 0.1,
        release: 0.1
  }
}).toMaster() 

jakeSynth.triggerAttackRelease('B2', '8n')


For more detail visit link:-
https://tonejs.github.io/