Как отобразить клавиатуру с помощью пользовательского интерфейса Tone.js в Angular?

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/