How to effectively loop short audio samples with vanilla JS to create a drum sequencer?

Question

Trying to create a simple drum machine sequencing app without using any libraries. Basic purpose of the app is to loop audio at specified intervals while some sort of condition is met e.g. pressing the spacebar.

I figured out that looping audio with setInterval isn't really a good idea since it's pretty inconsistent. Found another solution using new Date() but the example requires calling the function with a set duration as an arg. What I'd like to do is use this same code, but have the loop run infinitely until a spacebar keydown or some other condition is met.

Is this possible? Any thoughts on how I can adapt or re-write this to get what I want? I know how to create my trigger for the loop with event handlers, but each keydown or whatever event will trigger a new audio event (causing loops on top of loops) vs. killing the process of the last one which once set to "loop forever" does just that...

function doTimer(totalms, interval, oninstance, kill) {
  var time = 0,
  start = new Date().getTime();
  function instance() {
    time += interval;
    if (kill) {
    } else {
    var diff = (new Date().getTime() - start) - time;
    window.setTimeout(instance, (interval - diff));
    oninstance(time + diff);
    }
  }
window.setTimeout(instance, interval);
}

function playSample(str){
  soundStr = `./audio808/${str}.mp3`;
  sound = new Audio(soundStr);
  sound.play();
}

doTimer(0, // duration
    125, // sets the interval
    function() {
    playSample("ch");}, // calls the sample to play 
    true // whether or not it should play
  );

You might review this solution. https://github.com/rhroyston/mdl-audio All you need to do is listen for a keyboard event. You should not need to use the Date object or setInterval since you want to restart audio upon keypress. MDN has a great article on the subject too. — Ronnie Royston, Nov 05 '17 at 17:00
Are you trying to loop a sequence of multiple media files playback? Or loop a single media file playback? — guest271314, Nov 05 '17 at 17:00
I should clarify. I'm trying to loop a short sound file at a set interval. I do not simply want the audio file to play once on a key event but to continue to play at a set interval with the option to toggle the loop on and off once it starts. Eventually I'd like to have a sequence of multiple files playing back all at their own intervals and loops but set to the same start time. — Dbbl Dz, Nov 05 '17 at 17:14
_"Eventually I'd like to have a sequence of multiple files playing back all at their own intervals and loops but set to the same start time."_ does not appear at text of original Question, see https://stackoverflow.com/help/how-to-ask — guest271314, Nov 05 '17 at 17:21
Because, I'm not looking for a solution to that problem right now... — Dbbl Dz, Nov 05 '17 at 17:29
Once the loop is started it cannot be stopped. I'm seeking a way to have it run infinitely (which is currently does) but toggle on or off e.g. click a button or key press and the loop runs. click another button or key press and the loop stops. — Dbbl Dz, Nov 05 '17 at 17:42

score 3 · Answer 1 · answered Nov 05 '17 at 16:57

3

You can set the .loop property of AudioNode to true

sound.loop = true;

answered Nov 05 '17 at 16:57

guest271314

1
15
104
177

Not sure this achieves what I'm trying to do. I need the audio to loop at a set interval (which is what will create the pattern/rhythm of the drum hits). Unless, I'm not understanding this prop? – Dbbl Dz Nov 05 '17 at 17:17
See [Mixing two audio buffers, put one on background of another by using web Audio Api](https://stackoverflow.com/questions/42557005/mixing-two-audio-buffers-put-one-on-background-of-another-by-using-web-audio-ap/), [Web audio api, stop sound gracefully](https://stackoverflow.com/questions/41511541/web-audio-api-stop-sound-gracefully/) – guest271314 Nov 05 '17 at 17:20
@DbblDz See also [HTML5 audio streaming: precisely measure latency?](https://stackoverflow.com/questions/38768375/html5-audio-streaming-precisely-measure-latency/), [How to use “segments” mode at SourceBuffer of MediaSource to render same result at Chomium, Chorme and Firefox?](https://stackoverflow.com/questions/46379009/how-to-use-segments-mode-at-sourcebuffer-of-mediasource-to-render-same-result) – guest271314 Nov 05 '17 at 17:45

How to effectively loop short audio samples with vanilla JS to create a drum sequencer?

1 Answers1