制作一个JavaScript节拍器

huangapple
go评论95阅读模式
英文:

making a Javascript metronome

问题

Newbie here, I'm trying to make a Javascript metronome, but I'm stuck on making the sound play according to the current bpm of the project

Here's where I think the problem lies, when I press play, it sounds, but in a fixed bpm, that is not the one being inputted in the bpm variable:

  1. //VARIABLES
  2. let bpm = 150;
  3. let soundInterval = (60/bpm)*1000;
  5. //FUNCTIONS
  7. //START METRONOME
  8. let startStopMetronome = startButton.addEventListener('click', () => {
  9.     startMetronome(soundInterval);
  10. })
  12. function startMetronome(si) {
  13.     setTimeout(() => {
  14.         primaryBeat.play();
  15.         startMetronome(si);
  16.     }, si);
  17. }

UPDATE:
I've tried making the soundInterval update with a function, but it still does the same, and plays the same fixed interval no matter the bpm changes

  1. //VARIABLES
  2. let bpm = 150;
  3. let soundInterval;
  5. //FUNCTIONS
  7. //START METRONOME
  8. let startStopMetronome = startButton.addEventListener('click', () => {
  9.     soundInterval = calculateSoundInterval();
  10.     startMetronome(soundInterval);
  11. })
  13. function startMetronome(si) {
  14.     setTimeout(() => {
  15.         primaryBeat.play();
  16.         startMetronome(si);
  17.     }, si);
  18. }
  20. let calculateSoundInterval = () => {
  21.     return (60/bpm)*1000;
  22. }
  24. let updateBpmInDisplay = display.addEventListener('change', () => {
  25.     soundInterval = calculateSoundInterval();
  26. })
英文:

Newbie here, I'm trying to make a Javascript metronome, but I'm stuck on making the sound play according to the current bpm of the project

Here's where I think the problem lies, when I press play, it sounds, but in a fixed bpm, that is not the one being inputted in the bpm variable:

  1. //VARIABLES
  2. let bpm = 150;
  3. let soundInterval = (60/bpm)*1000;
  6. //FUNCTIONS
  8. //START METRONOME
  9. let startStopMetronome = startButton.addEventListener('click', () => {
  10.     startMetronome(soundInterval);
  11. })
  14. function startMetronome(si) {
  15.     setTimeout(() => {
  16.         primaryBeat.play();
  17.         startMetronome(si); 
  18.     },si);
  19. }

UPDATE:
I´ve tried making the soundInterval update with a function, but it still does the same, and plays the same fixed interval no matter the bpm changes

  1. //VARIABLES
  2. let bpm = 150;
  3. let soundInterval;
  8. //FUNCTIONS
  10. //START METRONOME
  11. let startStopMetronome = startButton.addEventListener('click', () => {
  12.     soundInterval = calculateSoundInterval();
  13.     startMetronome(soundInterval);
  14. })
  17. function startMetronome(si) {
  18.     setTimeout(() => {
  19.         primaryBeat.play();
  20.         startMetronome(si); 
  21.     },si);
  22. }
  24. let calculateSoundInterval = () => {
  25.     return (60/bpm)*1000;
  26. }
  28. let updateBpmInDisplay = display.addEventListener('change', ()=> {
  29.     soundInterval = calculateSoundInterval();
  30. })

答案1

得分: 1

以下是翻译好的部分：

"我认为查看我如何完成这个任务可能会很有趣。我使用了AudioContext和振荡器来制作声音，而不是直接使用setTimeout，我使用了一个辅助函数来模拟异步操作。如果我想要改进这个，我可能会在更高的作用域中保留我的timeout，这样当停止按钮按下时，我可以清除timeout，并防止在快速按下停止和开始按钮以同时运行两个循环时出现任何错误。希望我的想法对你有一些价值，很有趣。"

请注意，代码部分没有被翻译。

英文:

I thought it might be fun to look over how I would accomplish this. I used an AudioContext and oscillator to make the sound, and instead of using setTimeout directly I used a helper function to model async practice. If I wanted to improve upon this, I might hold onto my timeout in a higher scope, so when stop is pressed I could clear the timeout and prevent any bugs when pressing stop and start quickly to have two loops running at the same time. I hope my take on things has some value 👍 was fun to look at.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const get = str =&gt; document.querySelector(str);
  2. const wait = seconds =&gt; new Promise(r =&gt; setTimeout(r, seconds * 1e3));
  4. const context = new AudioContext();   
  5. let cntr = 0;
  6. const makeSound = () =&gt; {
  7.   const sound = context.createOscillator();
  8.   const fourthBeat = cntr++ % 4 === 0;
  9.   sound.frequency.value = fourthBeat ? 400 : 440;
  10.   sound.connect(context.destination);
  11.   sound.start(context.currentTime);
  12.   sound.stop(context.currentTime + .1);
  13. };
  15. let bpm = 60;
  16. get(&quot;input&quot;).addEventListener(&quot;input&quot;, e =&gt; {
  17.   bpm = e.target.value;
  18.   get(&quot;.display&quot;).innerText = bpm;
  19. });
  21. let running = true;
  22. get(&quot;.start&quot;).addEventListener(&quot;click&quot;, async () =&gt; {
  23.   running = true;
  24.   get(&quot;.start&quot;).disabled = true;
  25.   while (running) {
  26.     makeSound();    
  27.     await wait(60 / bpm);
  28.   }
  29. });
  31. get(&quot;.stop&quot;).addEventListener(&quot;click&quot;, () =&gt; {
  32.   running = false
  33.   get(&quot;.start&quot;).disabled = false;
  34.   cntr = 0;
  35. });

<!-- language: lang-html -->

  1. &lt;div class=&quot;display&quot;&gt;60&lt;/div&gt;
  2. &lt;input min=&quot;30&quot; max=&quot;200&quot; value=&quot;60&quot; type=&quot;range&quot; /&gt;
  3. &lt;button class=&quot;start&quot;&gt;start&lt;/button&gt;
  4. &lt;button class=&quot;stop&quot;&gt;stop&lt;/button&gt;

<!-- end snippet -->

答案2

得分: 0

感谢大家的帮助。最后，问题是我没有配置输入来在点击或输入时重置声音，所以声音一直播放直到自然停止。我添加了 currentTime = 0，问题解决了，现在它按预期工作：

  1. function startMetronome(si) {
  2.     timerId = setInterval(() => {
  3.         primaryBeat.play();
  4.         primaryBeat.currentTime = 0;
  5.     }, si);
  6. }
英文:

Thanks everyone for the help. At the end, the issue was that I had not configured the inputs to reset the sound on click or input, so the sound just played until it stopped naturally. I added currentTime = 0, and problem solved, now it works as intended:

  1. function startMetronome(si) {
  2.     timerId = setInterval(() =&gt; {
  3.         primaryBeat.play();
  4.         primaryBeat.currentTime = 0;
  5.     },si);
  6. }

huangapple
  • 本文由 发表于 2023年3月4日 06:30:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/75632384.html
  • javascript
  • metronome
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定