let step = index % 16;
for (let i = 0; i < rows.length; i++) {
let synth = synths[i],
note = notes[i],
row = rows[i],
input = row.querySelector(`label:nth-child(${step + 1})`);
span = input.querySelector(`span`);
checkbox = input.querySelector('input');
if (checkbox.checked) {
if (i <= 7) {
synth.triggerAttackRelease(note, '8n');
} else if (i === 10) {
synth.triggerAttackRelease(plucknote, '8n');
}else {
synth.triggerAttackRelease('8n');
}
}
span.classList.toggle('highlight')
}
index++;
}
Tone.Transport.bpm.value = 200;
tempo.addEventListener("change", e => {
Tone.Transport.bpm.rampTo(e.target.value, 0.1);
});
<div class='audio-design'>
<div id='audio-out'>
<img id='music-icon' src="dist/images/music-icon.png" alt="music-icon">
<strong id='title'>Perfect - Ed Sheeran</strong>
<img id='forward' onclick='myFunction()' src="dist/images/forward.png" alt="forward">
</div>
<audio id='m0' class='controls' controls preload="auto" loop
src="dist/images/Ed Sheeran - Perfect (Lyrics).mp3"></audio>
<audio id='m1' class='controls' controls preload="auto" loop
src="dist/images/Wiz Khalifa - See You Again ft. Charlie Puth [Official Video] Furious 7 Soundtrack.mp3"></audio>
<audio id='m2' class='controls' controls preload="auto" loop src="dist/images/God's Plan.mp3"></audio>
</div>