JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<script src="https://tonejs.github.io/CDN/r6/Tone.js"></script>

JavaScript

var snareUrl = "https://tonejs.github.io/Tone.js/examples/audio/505/snare.mp3";
var snare = new Tone.Player(snareUrl).toMaster();
//you don't need to wait for the sample to 
snare.retrigger = true;

var chain = new Tone.CtrlMarkov({
"C2": [{value:"D2",probability:0.8},{value:"E2", probability:0.2}],
"D2": ["C2","E2"],
"E2": ["D2","F2"],
"F2": [{value:"E2",probability:0.4},{value:"G2", probability:0.4},{value:"A2", probability:0.1},{value:"E2", probability:0.1}],
"G2": [{value:"F2",probability:0.4},{value:"A2", probability:0.4},{value:"E2", probability:0.1},{value:"B2", probability:0.1}],
"A2": ["G2","B2"],
"B2":[{value:"A2",probability:0.8},{value:"snare", probability:0.2}]
//snare:"B2"

});

var synth = new Tone.FMSynth().toMaster();

//set beginning
chain.value = "C2";

Tone.Buffer.on("load", function(){

	var now = synth.now();
	//play 70 notes
  for (var i=0;i<70;i++){
  	//trigger the snare on every G2
  	if (chain.value === "snare"){
    	snare.start(i*0.4 + now);
    } else {
    	 //schedule them all
		 	synth.triggerAttackRelease(chain.value,0.1,i*0.4 + now);
    }
    //get the next state in the Markov chain
    chain.next();
  }
});