JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//mohayonao.github.io/timbre.js/timbre.dev.js"></script>
<button style="font-size:300%" id="heartbeat1">Start1</button>
<button style="font-size:300%" id="heartbeat2">Start2</button>

JavaScript

var timerId;

document.getElementById("heartbeat1").onclick = function() {
		sound.play();
		if (timerId) {
    		timerId = clearTimeout(timerId);
    } else {
    		heartbeat1()
    }
};
document.getElementById("heartbeat2").onclick = function() {
		sound.play();
		if (timerId) {
    		timerId = clearTimeout(timerId);
    } else {
    		heartbeat2()
    }
};

var bpm = 120;

// heartbeat1

function heartbeat1() {
  	var sine1 = T("fami", {freq:480, mul:0.02});
  	var sine2 = T("pulse", {freq:480, mul:0.015});
  	var perc = T("perc", {r:210}, sine1, sine2);
  	perc.bang();

  	var reverb = T("reverb", {room:0.6, damp:1.0, mix:0.45}, perc);
  	var sound = T("pan", {pos:0.25}, reverb);

		// ended は perc から発火します
  	perc.on("ended", function() {
    		console.log("perc.ended");
        // そのタイミングで sound 全体を停止する
    		sound.pause();
  	}).bang();
    
    sound.play();
  	
    timerId = setTimeout(heartbeat1, (1000*60)/bpm);
}

// heartbeat2
// 共通部分 (エフェクト部分) は別で実行しておいて
// 個別の音 ([ fami, pulse ] -> perc) をそこに接続するパターン

var reverb = T("reverb", {room:0.6, damp:1.0, mix:0.45});
var sound = T("pan", {pos:0.25}, reverb);


function heartbeat2() {
  	var sine1 = T("fami", {freq:480, mul:0.02});
  	var sine2 = T("pulse", {freq:480, mul:0.015});
  	var perc = T("perc", {r:210}, sine1, sine2);

		reverb.removeAll();
  	perc.on("ended", function() {
    		console.log("perc.ended");
    		sine1.pause();
    		sine2.pause();
    		perc.pause();
  	}).bang().appendTo(reverb);
  	
    timerId = setTimeout(heartbeat2, (1000*60)/bpm);
}