JSFiddle - React, Tailwind, and code Playground

by Tiriree Kananuruk

HTML

<script src="https://tonejs.github.io/Logo/build/Waveform.js"></script>
<link rel="stylesheet" href="https://tonejs.github.io/assets/css/interface.css">
<script src="https://tonejs.github.io/build/Tone.min.js"></script>

JavaScript

var osc = new Tone.Oscillator().toMaster()

var player = new Tone.Player("https://tonejs.github.io/examples/audio/casio/A1.mp3")
  .toMaster()
player.retrigger = true

function playerCallback(time) {
  player.start(time).stop(time + 0.1)
}

function oscCallback(time) {
  osc.start(time).stop(time + 0.1)
}

//player scheduling
Tone.Transport.schedule(playerCallback, 0)
Tone.Transport.schedule(playerCallback, 1)
Tone.Transport.schedule(playerCallback, 2)

//oscil scheduling
Tone.Transport.schedule(oscCallback, 0.5)
Tone.Transport.schedule(oscCallback, 1.5)
Tone.Transport.schedule(oscCallback, 2.5)

Tone.Buffer.on('load', function() {
  Tone.Transport.start().stop("+1.5").start("+4")
})