0

我对 Javascript 和一般编码都很陌生，所以对我来说放轻松！

我已经使用 setInterval 在 HTML、JS 等中制作了一个（非常）简单的节拍器 - 我知道这有一些限制，而且它不是这样做的最准确的方法等等。话虽如此，在各种桌面浏览器似乎工作得比较好。然而：

  • 在桌面 Safari (15.1) 上，音频似乎无法正常播放 - 听得见但声音低沉。

  • 在我尝试过的每个移动浏览器（Safari、Firefox、Chrome - 不确定哪些版本）上，它似乎根本不起作用。

对此的任何帮助将不胜感激 - 我在下面包含了实际节拍器部分的代码。我必须假设这些问题与 setInterval 以某种方式有关，我只是希望有人能阐明为什么它不起作用。

干杯!

  const sound = document.querySelector('audio');
  const powerButton = document.querySelector('.on-button');
  let poweredOn = false;
  let metronome;
  let milliseconds;

  function playSound() {
      if (milliseconds != Infinity) {
        sound.currentTime = 0;
        sound.play();
      }
    }

  function setMilliseconds() {
    let tempo = document.querySelector('.tempo').value;
    milliseconds = 60000 / tempo;


    if (poweredOn == true) {
      clearInterval(metronome);
      if (milliseconds >= 100) {
        playSound();
        metronome = setInterval(playSound, milliseconds);
        }
    }

    if ((!tempo || milliseconds < 100) && poweredOn == true) {
      poweredOn = false;
      clearInterval(metronome);
      powerButton.classList.remove('switched-on');
    }
  }

  function activate() {
    if (milliseconds) {
      let tempo = document.querySelector('.tempo').value;
      poweredOn = poweredOn ? false : true ;
      if (poweredOn && milliseconds) {
        if (milliseconds < 100 || !milliseconds || !tempo) {
          this.classList.add('invalid');
          setTimeout(() => {
            this.classList.remove('invalid');
          }, 100)
          poweredOn = false;
        } else {
          this.classList.add('switched-on');
          playSound();
          metronome = setInterval(playSound, milliseconds);
        }
      } else {
        this.classList.remove('switched-on');
        clearInterval(metronome);
      }
    } else {
      this.classList.add('invalid');
      setTimeout(() => {
        this.classList.remove('invalid');
      }, 100)
    }
  }

编辑 - 我已经添加了节拍器中的所有 JS，而不仅仅是一个功能。从那以后，我将其更改为使用重复的 setTimeout 而不是 setInterval，以便我可以调整间隔以补偿漂移 - 调试表明问题可能出在移动设备上播放的音频，而不是间隔他们自己。有什么想法吗？

4

0 回答 0