[step-sequencer] The slider inputs to set the envelope of the "Sweep" sound are not working as expected
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 1.4k
- Forks
- 443
- PR merge metrics
- No merged PRs in 30d
Description
What information was incorrect, unhelpful, or incomplete?
The two sliders to set the envelope of the "Sweep" sound are not working as expected.
What did you expect to see?
There are actually 2 issues:
- For both inputs, the values are not updated properly. The input should update the value progressively with a 0.1 step, but it only updates to 0 or 1. The problem comes from that the value is cast into an int in the event listener callback.
const attackControl = document.querySelector("#attack");
attackControl.addEventListener(
"input",
(ev) => {
attackTime = parseInt(ev.target.value, 10);
},
false
);
Since their value are between 0 and 1 with a step of 0.1, the usage of "parseInt" is inadecuate.
<section class="controls">
<label for="attack">Att</label>
<input
name="attack"
id="attack"
type="range"
min="0"
max="1"
value="0.2"
step="0.1"
/>
<label for="release">Rel</label>
<input
name="release"
id="release"
type="range"
min="0"
max="1"
value="0.5"
step="0.1"
/>
</section>
- The way the release input works is not correct. When the slider is set to left, the release should be 0, whereas when it's set to the right, we should be able to hear the release.
Your can try for yourself here:
If you set the values like this you hear a sound that is plucked:
When you set it like this you hear a longer release:
It should be the other way around
The problem comes from the implementation of the envelope:
sweepEnv.gain.linearRampToValueAtTime(
0,
time + attackTime - releaseTime // here it shouldn't be a "-" operator
);
I'm currently going through the Web API guide where this step sequencer is used: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques
Since I identified the what causes the issue in the code I'd be happy to work on a fix + updating the doc.
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in the step-sequencer example by locating the attack and release input listeners and the sweep envelope implementation. Verify that range values update in 0.1 increments and that release duration increases toward the right; then check the linked Advanced techniques documentation for any corresponding example text that needs updating.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- audio-video-rtc
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100