如何在JavaScript中同步播放音频文件？

14 浏览
0 Comments

如何在JavaScript中同步播放音频文件？

我正在开发一个将文本转换为莫尔斯码音频的程序。

比如我输入sos。我的程序将把它转换成数组[1, 1, 1, 0, 2, 2, 2, 0, 1, 1, 1]。其中s = 点 点 点（或者1, 1, 1），o = 划线 划线 划线（或者2, 2, 2）。这部分相当简单。

接下来，我有两个音频文件：

var dot = new Audio('dot.mp3');
var dash = new Audio('dash.mp3');

我的目标是编写一个函数，当它遇到1时播放dot.mp3，遇到2时播放dash.mp3，遇到0时暂停。

下面这段代码有点/有些时候能工作，但我认为它基本上有缺陷，而且我不知道如何修复它。

function playMorseArr(morseArr) {
  for (let i = 0; i < morseArr.length; i++) {
    setTimeout(function() {
      if (morseArr[i] === 1) {
        dot.play();
      }
      if (morseArr[i] === 2) {
        dash.play();
      }
    }, 250*i);
  }
}

问题：

我可以循环遍历数组并播放音频文件，但时间控制是一个挑战。如果我没有正确设置setTimeout()的间隔，如果上一个音频文件还没有播放完，而250ms已经过去，那么数组中的下一个元素将被跳过。所以dash.mp3的长度比dot.mp3长。如果我的时间控制太短，我可能会听到[点 点 点 暂停 划线 划线 暂停 点 点 点]，或者类似这样的效果。

我想要的效果

我希望程序像这样运行（伪代码）：

  1. 查看数组的第ith个元素
  2. 如果是1或2，开始播放音频文件，否则创建一个暂停
  3. 等待音频文件或暂停结束
  4. 增加i，并返回到步骤1

我想到的解决方法，但不知道如何实施

问题是我希望循环同步进行。我在一些需要按特定顺序执行多个函数的情况下使用过promise，但我该如何链接不确定数量的函数呢？

我还考虑过使用自定义事件，但我遇到了同样的问题。

0