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 panner = new Tone.Panner().toMaster()
//var osc = new Tone.Oscillator(400, "sawtooth6").connect(panner.pan).start()
var pan= new Tone.Panner(1).toMaster()
var osc = new Tone.Oscillator(20, "sine2").toMaster()
//var osc2 = new Tone.Oscillator(600, "sawtooth6").connect(panner)

var delay = new Tone.FeedbackDelay().connect(pan)
delay.delayTime.value = 0.02
delay.feedback.value = 0.5


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


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

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

function oscCallback2(time) {
  osc.start(time).stop(time + 5)
}

var oscLoop = new Tone.Loop(oscCallback, 1).start(0.5).stop(9)
//var oscLoop = new Tone.Sequence(oscCallback, [[440, 880, 110], 770, [990, 440], 1111], 1).start(0)
//var playerLoop = new Tone.Sequence(playerCallback, [0, 0, 0, 0], 1).start(0.5).stop(60)

//player scheduling
Tone.Transport.schedule(playerCallback, 0)
Tone.Transport.schedule(playerCallback, 0.5)
Tone.Transport.schedule(playerCallback, 1)
Tone.Transport.schedule(playerCallback, 2.5)
Tone.Transport.schedule(playerCallback, 3)
Tone.Transport.schedule(playerCallback, 5.5)
Tone.Transport.schedule(playerCallback, 6)
Tone.Transport.schedule(playerCallback, 7)
Tone.Transport.schedule(playerCallback, 10)
Tone.Transport.schedule(playerCallback, 12.5)
Tone.Transport.schedule(playerCallback, 15)
Tone.Transport.schedule(playerCallback, 19.5)
Tone.Transport.schedule(playerCallback, 24.5)
Tone.Transport.schedule(playerCallback, 25.5)
Tone.Transport.schedule(playerCallback, 27)
Tone.Transport.schedule(playerCallback, 35)



//oscil scheduling
Tone.Transport.schedule(oscCallback, 0.5)
Tone.Transport.schedule(oscCallback, 1.5)
Tone.Transport.schedule(oscCallback, 3.5)
Tone.Transport.schedule(oscCallback, 5.5)
Tone.Transport.schedule(oscCallback, 9.5)
Tone.Transport.schedule(oscCallback,...