在 ts/js 和电子中使用 setInterval 播放音频答案

【问题标题】：Playing audio with setInterval in ts/js & electron在 ts/js 和电子中使用 setInterval 播放音频
【发布时间】：2020-07-06 22:04:15
【问题描述】：

我正在用电子创建一个节拍器，使用嚎叫器播放音频。

当窗口在屏幕上时，音频播放正常，但是当我最小化窗口时，音频开始以错误的间隔播放并且节拍器失败。

这些是我用来播放节拍的音频

const mainBeat = new Howl({
  src: ["sounds/Boutique808.mp3"],
  onplayerror: (e) => console.log(e),
});
const secondBeat = new Howl({
  src: ["sounds/tick.mp3"],
  onplayerror: (e) => console.log(e),
});

startBeats 函数创建一个由函数 bpmToMs 计算的间隔，如果 bpm 为 60 则结果为 750ms

如果 currentBeat 为 1 或 0，则 playBeat 函数播放 mainBeat，否则播放第二个节拍

startBeats = (..._: any[]) => {
   this.setState({ playing: true });
   this.playBeat();
   this.beatInterval = setInterval(() => {
     this.playBeat();
   }, bpmToMs(this.state.currentBpm));
};

playBeat = () => {
   this.incrementBeat();
   if (this.state.currentBeat === 1 || this.state.currentBeat === 0)
     mainBeat.play();
   else secondBeat.play();
};

我已经从我的 react 类组件中复制了必要的行，所以不用担心意外的单独语法:)

【问题讨论】：

标签： javascript reactjs typescript electron howler.js

【解决方案1】：

我通过在电子 webPreferences 中添加 backgroundThrottling: false 解决了这个问题

mainWindow = new MainWindow({
    width: width,
    height: height,
    minWidth: width,
    minHeight: height - 300,
    maxWidth: width,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      backgroundThrottling: false,
    },
    icon: path.join(__dirname, "assets/icons/png/1204x1024.png"),
  });

现在它工作得很好！

【讨论】：