Losowe akordy

kod html + javascript:

<div id="rezultat">
	<p>
		aby wylosować nowy akord odśwież stronę lub kliknij nazwę akordu<br/>
	</p>
	<div>
		<label for="delay">Do ilu sekund odczekać zanim próbka będzie zagrana ponownie
		<br/>(wartość będzie losowana,
		<br/>to jest maksymalna wartość w sekundach):</label>	
		<input type="number" id="delay" name="delay"
		min="0" max="1000" value="1">
	</div>
</div>
<script type="text/javascript">
rezultat = window.document.getElementById('rezultat');
// nazwy moll
let labelsMinor = ["c", "cis", "d", "es", "e", "f", "fis", "g", "gis", "a", "b", "h"];
let labelsMajor = ["C", "Des", "D", "Es", "E", "F", "Ges", "G", "As", "A", "B", "H"];
// wzorce interwalowe (akordy)
// możemy dodać lub zmienić listę interwałów, 
// np. aby dodać czterodźwięk zmniejszony dodajemy wiersz [3, 3, 3]
// (nowy wiersz oddzielamy od poprzeniego przecinkiem)
let patterns = [
	[4, 3, 4],
	[3, 4, 3]
];
let patternIndex = Math.random() > .5 ? 0 : 1;
let pattern = patterns[patternIndex];
let mode = patternIndex == 0 ? "dur7<" : "moll7";
console.log (patternIndex + " " + mode);
// losujemy podstawe akordu
// to określa ambitus, jeśli zmienimy te liczby - zmienimy losowany rejestr
let pointMini = 24;
let pointMaxi = 108 - 12;
let point = Math.floor(Math.random() * (pointMaxi-pointMini) + pointMini);
// etykieta
let labels = patternIndex == 0 ? labelsMajor : labelsMinor;
let pitchClass = point % 12;
let key = labels[pitchClass];
// obliczamy numery midi
// do podstawy akordu dodajemy interwaly
let midis = [point, 0, 0, 0];
let k = 1;
pattern.forEach ((interval) => {
	midis[k] = midis[k-1] + interval;
	k++;
})
// tworzymy przycisk
var aktualnieGramy = false;
var button = document.createElement('button');
button.innerHTML = 'graj';
button.style.fontSize = "5rem"
button.onclick = function(){	
	if (aktualnieGramy) {
		aktualnieGramy = false;
		audios.forEach((audio) => {
    		audio.pause();
		})
		button.innerHTML = 'graj';
	} else {
		aktualnieGramy = true;
		let audioNumber = 0;
		audios.forEach((audio) => {
			let delayMs = audioNumber == 0 ? 0 : Math.round (Math.random() * 2000) + 300;
			setTimeout(() => { 
				audio.play();
				// console.log(delayMs + ' ' + audio.src);
			}, delayMs);
			audioNumber++;
		})
		button.innerHTML = 'pauza';
	}

};
rezultat.appendChild(button);	
// tworzymy elementy audio i etykiety
let audios = [];
for (k=0; k<4; k++) {
	let midi = midis[k];
	var path = '_assets/piano_mp3/'+midi+'.mp3'
	var id = 'audio'+midi;
	audios[k] = window.document.createElement("audio");
	audios[k].setAttribute('id', id);
	audios[k].setAttribute('controls', 'true');
	audios[k].setAttribute('preload', 'true');
//	audios[k].setAttribute('loop', 'true'); // NIEPOTRZEBNE
	audios[k].setAttribute('src', path);
//	audios[k].setAttribute('autoplay', "true"); // OPCJONALNIE
// autoPlay afetr delay
	audios[k].onended = function(ev) {
		let el =ev.srcElement;
    	// console.log("The audio has ended");
		// console.log (el); 
		let maxDelay = document.getElementById("delay").value;
		let minDelay = 0;
		let delayMs = Math.round (Math.random() * maxDelay * 1000) + minDelay * 1000;
		console.log ("start delay: " + delayMs)
		setTimeout(() => { 
			// console.log ("play")
			el.play();
			// console.log(delayMs + ' ' + el.src);
		}, delayMs);
	};	
	var label = window.document.createElement("div");
	label.innerHTML = midi;
	label.classList.add("label");
	label.appendChild(audios[k]);
	rezultat.appendChild(label);

}
// tworzymy przycisk 2
var button2 = document.createElement('button');
button2.innerHTML = key + "-" + mode;
button2.style.fontSize = "5rem"
button2.onclick = function(){	
	window.location.reload();
};
rezultat.appendChild(button2);
</script>