私はゆっくりと速度を上げていくメトロノームを作ろうとしています。これにより、ハンドヘルド メトロノームを上げるために再生を停止することなくエクササイズを行うことができます。私はループを使用して各小節を再生し、停止ボタンを使用document.getElementById
して機能addEventListener
させ、ループの各パスの停止ボタンをクリックするのを探しています。を使用するconsole.log
と、停止ボタンをクリックするたびに表示されますが、 を使用してビート ループを停止しようとしても何も表示されsource.noteOff(context.currentTime)
ません。正しい方向への提案やポイントをいただければ幸いです。
html は次のとおりです。
<html>
<script type="text/javascript" src="file:///Users/katri/rails_projects/metronome/metronome2.js"></script>
<script type="text/javascript" src="file:///Users/katri/rails_projects/metronome/buffer-loader.js"></script>
<input type="button" onClick="startLoop();" value="Play Loop!">
<input type="button" id="stop" value="Stop Loop!">
</html>
問題のJavaScriptは次のとおりです。
var startTime = context.currentTime;
var tempo = 80; // BPM (beats per minute)
var eighthNoteTime = (60 / tempo) / 2;
var totalTime = startTime;
for (var bar = 0; bar < 2; bar++) {
document.getElementById('stop').addEventListener('click', function() {
source.noteOff(context.currentTime);
});
eighthNoteTime = (60 / tempo) / 2;
// Play the bass (kick) drum on beats 1, 3, 4, 5 & 7
playSound(kick, totalTime);
playSound(kick, totalTime + 1 * eighthNoteTime);
playSound(kick, totalTime + 3 * eighthNoteTime);
playSound(kick, totalTime + 4 * eighthNoteTime);
playSound(kick, totalTime + 5 * eighthNoteTime);
playSound(kick, totalTime + 7 * eighthNoteTime);
// Play the snare drum on beats 3, 7
playSound(snare, totalTime + 2 * eighthNoteTime);
playSound(snare, totalTime + 6 * eighthNoteTime);
totalTime = totalTime + 8 * eighthNoteTime;
tempo = tempo+5;
}
}
function playSound(soundIndex, time) {
var source = context.createBufferSource();
source.buffer = bufferLoader.bufferList[soundIndex];
source.connect(context.destination);
source.noteOn(time);
}