How to use tone - 10 common examples

componentDidMount () {
    // synth.triggerAttackRelease('E4', 3.5, 0)
    // synth.triggerAttackRelease('E4', 0.5, 1)
    // synth.triggerAttackRelease('G4', 0.5, 2)
    // synth.triggerAttackRelease('B4', 0.5, 3)
    console.log(`componentDidMount ${this.uuid}`)
    Tone.Transport.start('+0.1')
    this.rs()
    window.Tone = Tone
    // this.s(2)
    // this.s(4)
    // this.s(6)
    Tone.Transport.loopEnd = '1m'
    Tone.Transport.loop = true


    // TONE
    // Tone.Transport.bpm.value = 120
    // Tone.Transport.loopEnd = '4m'
    // Tone.Transport.loop = true
    // Tone.Transport.start('+0.1')
    // window.Tone = Tone

  }

const loadSoundFonts = async () => {
      const sendReverbGain = new Tone.Gain(0.3);
      const sendReverb = new Tone.Freeverb(0.7, 1000); // Tone.JCReverb();

      const melodyEQ = new Tone.EQ3(0, -5, 0);
      const melodyGain = new Tone.Gain(0.6);
      const melodySound = await Soundfont.instrument(
        ac,
        "acoustic_grand_piano",
        {
          soundfont: "MusyngKite",
          destination: melodyEQ,
          adsr: [0.02, 0.3, 0.9, 1.5]
        }
      );

      melodyEQ.chain(melodyGain, sendReverb, sendReverbGain, Master);
      melodyEQ.chain(melodyGain, Master);
      console.log("Melody sounds loaded!");

export default () => {
  var cutoffPos = 500;
  //// AUDIO MASTER
  var filter1 = new Tone.Filter(1000, "lowpass", -24).toMaster();
  var reverb = new Tone.JCReverb(0.5).connect(filter1);
  var delay = new Tone.FeedbackDelay(0.25, 0).connect(reverb);
  //// FX PARAMS
  filter1.Q.value = 0.3;
  filter1.gain.value = 0.35;
  reverb.wet.value = 0.5;

console.log("initial freq :"+ filter1.frequency.value);

  var lfo2Range = 500;
  var lfo2 = new Tone.LFO("4hz", cutoffPos, lfo2Range).stop();
  lfo2.connect(filter1.frequency);
  Tone.context.latencyHint = "playback";  // "balanced" "playback" "interactive"

  // GUI

this.sequence = new Sequence((time, col) => {
      this.beat = col;
      setCurrentBeat(this.beat);

      // 16 columns, each column: ex. [1, 0, 0, 0, 1, 1, 0, 1]
      const column = this.matrix[col];
      const nowPlayingAni = [];
      for (let i = 0; i < this.notes.length; i += 1) {
        if (col === 0 && i === 0 && this.checkStart === false && this.recording === true) {
          this.checkStart = true;
          this.startTime = now();
        }
        // make sure no play while loading
        if (column[i] === 1 && !this.loadingSamples) {
          const vel = (Math.random() * 0.5) + 0.5;
          // convert velocity(gain) to volume
          this.samples.volume.value = 10 * Math.log10(vel);
          // console.log('nowTime: ', now());
          // console.log('Transport.seconds: ', Transport.seconds);
          // console.log('time: ', time);
          // this.samples._players[this.notes[i]].start(time, 0, 0.5);
          this.samples._players[this.notes[i]].start(time);
          nowPlayingAni.push(i);
        }
      }
      playDrumAni(nowPlayingAni);

export class Channel {
  public static create(num: number) {
    const channel = new Channel();
    channel.number = num;
    channel.name = `Channel ${num}`;
    return channel;
  }

  @autoserialize public number!: number;
  @autoserialize public name!: string;
  @autoserializeAs(Effect) public effects: AnyEffect[] = [];
  public left = new Tone.Meter();
  public right = new Tone.Meter();
  public split = new Tone.Split();
  private panner = new Tone.Panner().toMaster().connect(this.split);
  private gain = new Tone.Gain().connect(this.panner);
  // tslint:disable-next-line:member-ordering
  public destination = this.gain;
  private connected = true;
  private muted = false;

  constructor() {
    this.split.left.connect(this.left);
    this.split.right.connect(this.right);
  }

  @autoserialize
  get pan() {
    return this.panner.pan.value;
  }
  set pan(pan: number) {
    this.panner.pan.value = pan;

public effects: AnyEffect[];
  public id: string;

  public left = new Tone.Meter();
  public right = new Tone.Meter();
  public split = new Tone.Split();

  private pannerNode = new Tone.Panner().toMaster().connect(this.split);

  /**
   * The panner for the channel.
   */
  // tslint:disable-next-line:member-ordering
  public panner = new Audio.Signal(this.pannerNode.pan, -1, 1);

  private gainNode = new Tone.Gain().connect(this.pannerNode);

  /**
   * The volume for the channel.
   */
  // tslint:disable-next-line:member-ordering
  public volume = new Audio.Signal(this.gainNode.gain, 0, 1);

  // tslint:disable-next-line:member-ordering
  public destination = this.gainNode;
  private connected = true;
  private muted: boolean;

  constructor(i: IChannel) {
    this.number = i.number;
    this.name = i.name;
    this.id = i.id;

this.loadingStatus += 1;
        console.log(`finish...${this.loadingStatus}/9: ${drumUrls[i]}`);
        if (this.loadingStatus === 9) {
          this.loading = false;
        }
      }).toMaster();
      this.samples[i].volume.value = mixing[i];
    }

    this.comp = new Tone.PolySynth(6, Tone.Synth, {
      "oscillator": {
        "partials": [0, 2, 3, 4],
      }
    }).toMaster();

    this.synth = new Tone.PolySynth(3, Tone.Synth, {
      "oscillator": {
        // "type": "fatsawtooth",
        "type": "triangle8",
        // "type": "square",
        "count": 1,
        "spread": 30,
      },
      "envelope": {
        "attack": 0.01,
        "decay": 0.1,
        "sustain": 0.5,
        "release": 0.4,
        "attackCurve": "exponential"
      },
    }).toMaster();

initSounds() {

    for (let i = 0; i < 9; i += 1) {
      this.loadingStatus = 0;
      this.samples[i] = new Player(drumUrls[i], () => {
        this.loadingStatus += 1;
        console.log(`finish...${this.loadingStatus}/9: ${drumUrls[i]}`);
        if (this.loadingStatus === 9) {
          this.loading = false;
        }
      }).toMaster();
      this.samples[i].volume.value = mixing[i];
    }

    this.comp = new Tone.PolySynth(6, Tone.Synth, {
      "oscillator": {
        "partials": [0, 2, 3, 4],
      }
    }).toMaster();

    this.synth = new Tone.PolySynth(3, Tone.Synth, {
      "oscillator": {
        // "type": "fatsawtooth",
        "type": "triangle8",
        // "type": "square",
        "count": 1,
        "spread": 30,
      },
      "envelope": {
        "attack": 0.01,
        "decay": 0.1,

Tone.context.resume().then(() => {
            if (!(LinkClient.isEnabled())) {
                // start the normal way
                Tone.Transport.start("+0.2");
                resolve();
            }
            else {
                log.info('LINK: Waiting for `downbeat` message...');
                // wait for Link-socket to give downbeat signal
                LinkClient.once('downbeat', () => {
                    downbeatStartCallback();
                    log.info('LINK: Received `downbeat` message, starting playback');
                    resolve();
                });
            }
        })
    })

export function toTickTime(time: number) {
  // FIXME(3) is ceil right?
  return `${Math.ceil(time * Tone.Transport.PPQ)}i`;
}