Tone.Loop

Homepage example

by Dhanck

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>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>
<script src="https://unpkg.com/tone"></script>
<script src="https://unpkg.com/@tonejs/ui"></script>

<tone-demo>
  <tone-play-toggle></tone-play-toggle>
</tone-demo>

JavaScript

var synth = new Tone.MembraneSynth().toMaster()

//create a loop
var loop = new Tone.Loop(function(time){
	synth.triggerAttackRelease("C1", "8n", time)
}, "4n")

//play the loop between 0-2m on the transport
loop.start(0).stop('2m')

//start/stop the transport
document.querySelector('tone-play-toggle').addEventListener('change', e => Tone.Transport.toggle())