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

Question

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

npm install tone
npm install @tonejs/ui

我可以演奏音符，并且我想使用在这个fiddle中看到的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:

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

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/