[Question] How to stop / restart the signal?

[satelllte]

For example, I have onClick callback where I'm producing some signal and I want to stop after it's finished playing:

const onClick = () => {
  const signal = getSignal(...); // e.g, some short drum sample signal
  core.render(signal, signal);
};

So I'm wondered:

1. How can I stop the signal after it's finished playing?
2. How can I stop the signal before it's finished playing and restart with the new one?

[satelllte]

All the Elementary Audio examples I saw online so far, they're usually show how to start the continuous signal with some rate nodes like el.seq, el.train. I'm pretty sure it's possible to play the signal just once with Elementary, so maybe I'm just missing something? 🙏🏻

[nick-thompson]

Hey @satelllte, great question, this is one I get a lot.

You mentioned Elementary demonstrating continuous signals, and I think that's a good place to start. Every audio graph that you render with Elementary represents a continuous signal, something that will keep playing each time the audio driver needs more information to give to your speakers. So core.render(el.cycle(440)) makes a sine tone forever until you render a graph that should dictate otherwise. In that way, I think it helps sometimes to think about Elementary the way you would think about analog or modular audio: the VCO emits a continuous signal, but whether or not we hear it (and at what amplitude) is governed by triggering the VCA and multiplying the VCO by the VCA.

let gate = el.const({key: 'g', value: 1});
let env = el.adsr(1, 1, 1, 1, gate);

 // Emits a sine tone that passes through a 1s attack phase of an ADSR envelope
core.render(el.mul(env, el.cycle(440));

// Some time later...
let gate = el.const({key: 'g', value: 0});
let env = el.adsr(1, 1, 1, 1, gate);

 // The gate falls to 0, triggering the release phase of the ADSR, eventually muting our sine tone
core.render(el.mul(env, el.cycle(440));

Note in this example that we have to be very intentional about representing the time when the gate is high (envelope is on), and the time when the gate is low (envelope is off).

The same principles apply to sample playback, we just have to fit them into the semantics of the el.sample node. In that case, we use a gate (or pulse, pulse train, etc) where the rising edge (0 -> 1) triggers playback. Therefore if we don't ever want to trigger the sample a second time, don't create a new rising edge. If we do want to trigger the sample a second time, we need to first send a falling edge (1 -> 0) so that we can sometime thereafter send the next rising edge.

// Triggers sample playback immediately because our constant value 1 has a rising edge and never falls
core.render(el.sample({path}, 1, 1);

// Triggers sample playback every 1s, and there's a falling edge halfway through the train period but you don't hear it
// because the sample is in it's default "trigger" mode
core.render(el.sample({path}, el.train(1), 1);

// Triggers sample playback every 1s, and there's a falling edge halfway through the train period and you *do* hear it
// because the sample is in "gate" mode
core.render(el.sample({path, mode: "gate"}, el.train(1), 1);

So to your specific questions, stopping the sample requires you to either use "gate" mode and send the falling edge at the time
you want to stop playback, or to use the VCA idea and multiply some envelope by the output of your sample node. Restarting the sample just requires that you send a falling edge at some point so that you can send a new rising edge. A simple way to do this might be by replacing your onClick with an onMouseDown (send a rising edge) and an onMouseUp (send a falling edge); that would make sure that your sample triggers on every click because the pulse train gets to "reset" in between.

Now of course there are instances where you can't break your "onClick" into two discrete events; here we have to figure out how to map impulses (events which can't be broken into pieces) to the pulse train state. For this, a pattern I like is to use two sampler "voices" (the same way a multi-sampler or synthesizer has many voices). That way, when I get the event impulse, I can send a rising edge to one of my sampler voices and send a falling edge to the other, preparing it for the next event impulse

let nextVoice = 0;
let voices = [ {path, value: 0}, {path, value: 0} ];

onImpulseEvent = (e) => {
  // We'll send a rising edge to the next available voice
  voices[nextVoice].value = 1;
  nextVoice = (nextVoice + 1) % voices.length;

  // And pre-emptively "reset" the new next voice
  voices[nextVoice].value = 0;

  core.render(
    el.add(
      el.sample({path: voices[0].path, mode: "gate"}, el.const({key: 'g1', value: voices[0].value}))),
      el.sample({path: voices[1].path, mode: "gate"}, el.const({key: 'g2', value: voices[1].value}))),
    )
  );        
};

It can be confusing trying to get comfortable with this "representing continuous signals" idea, but I think it's worth it once you get it. Let me know if that all makes sense!

[nick-thompson]

As you can see, I have a very short signal without the sustain. And basically it plays just once regardless what I'll be doing with the gate afterwards. For example, if I'm going to change it to 0 and then back to 1, nothing will play anymore. And that's understandable, because the ADSR allowed the signal to play only for a short time at the beginning in this case.

So thinking further, I believe this might be somehow related to the web enviroment and the fact that there's an AudioContext instance which has its ever-increasing currentTime timestamp. So what I'm trying to achieve is to start playing this ADSR from the beginning on each click at AudioContext.currentTime, but not 0.

Hmm I'm not sure I follow you exactly here, but I'm wondering, if your goal is to play a little beep on every click, could you still use the onMouseDown/onMouseUp distinction that I wrote above?

const onMouseDown = () => {
  const gate = el.const({key: 'gate', value: 1});
  const env = el.adsr(0.01, 0.5, 0, 0, gate);
  const out = el.mul(env, el.cycle(440));
  core.render(out, out);
};

const onMouseUp = () => {
  const gate = el.const({key: 'gate', value: 0});
  const env = el.adsr(0.01, 0.5, 0, 0, gate);
  const out = el.mul(env, el.cycle(440));
  core.render(out, out);
};

I don't think you'll need el.time here, although admittedly that's a large part of what I'm not sure I understand in your question. I'll answer in your new topic more specifically, but AudioContext.currentTime and el.time are unrelated but provide the same general idea: it's a count of elapsed samples representing the duration that the engine has been processing. In the AudioContext I believe you have some ability to set the current time, which you don't have with Elementary and el.time although I am considering adding that feature.

But perhaps I can clarify by asking: what does time have to do with playing a sound on click? Or what behavior do you want out of that relationship?

[satelllte]

@nick-thompson Unfortunately, onMouseDown, onMouseUp doesn't work in this case because the ADSR works only at the very start - only at the first render as far as I understand.

I've created a quick sandbox to demonstrate it:
https://stackblitz.com/edit/elementary-adsr

You'll hear the sound only on the first press, but not on the subsequent ones. What I'm trying to achieve is to play the same sound from the ADSR on each click.

[nick-thompson]

Ahh yes, of course– your understanding is correct! I'm sorry I didn't realize sooner, you've just encountered a bug with el.adsr specifically that I'm working to fix as soon as possible. For example, if you change const env = el.adsr(0.01, 0.5, 0, 0, gate); to const env = el.sm(gate);, you will see the desired behavior (el.sm will just smooth the gate signal to create a quick AR envelope).

I'll have this fixed shortly! Keep an eye out for the v2.0.1 update

[satelllte]

@nick-thompson Oh, I see now. So I was thinking the ADSR is somehow attaches to the core engine's start because of this bug. And yes, it works with el.sm instead of el.adsr. Waiting for the patch then 🙏

[nick-thompson]

v2.0.1 is now available!