JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<script src="https://tonejs.github.io/CDN/r6/Tone.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button id="0">
sample0
</button>

<button id="1">
sample1
</button>

<button id="2">
sample2
</button>

<button id="3">
sample3
</button>


<button id="4">
sample4
</button>

JavaScript

var x = 4;
var players = [];
var myNotesURL = [
    "https://aamontoya89.github.io/samples/01_bassdrum.wav",
    "https://aamontoya89.github.io/samples/02_snare.wav",
    "https://aamontoya89.github.io/samples/03_gtr.wav",
    "https://aamontoya89.github.io/samples/04_metal.wav",
    "https://aamontoya89.github.io/samples/05_noise.wav"
];

for (var i = 0; i < myNotesURL.length; i++) {
	players[i] = new Tone.Player(myNotesURL[i]).connect(Tone.Master);
 players[i].loop = true;
}


$("button").on("mousedown", function(){
  var sample = this.id;
  startSample(sample);

}).on("mouseup", function(){
var sample = this.id;
	stopSample(sample);
});


function startSample(sample) {
  players[sample].start();
}

function stopSample(sample) {
  players[sample].stop();
}