节拍器网络应用程序的音频标签替代品

Question

我是 Web 开发的新手，我一直在开发一个简单的节拍器 Web 应用程序。这里是：

http://anyonecanplayguitar.org/beatkeeper/

JS：http://anyonecanplayguitar.org/beatkeeper/js/simplified.js

我对在网页上包含和处理音频的知识有限，因此为了创建点击，我将一个简短的音频剪辑附加到一个计时器，该计时器根据设置的每分钟节拍触发。在 Chrome、Firefox 和 Opera 中，这种方法可以正常工作。在 Safari 中，音频的行为很奇怪。它会响亮地开火一次，然后以不一致的节奏安静地开火。在 IE 中发现了类似的行为。我没有成功让任何音频在 iOS 或 Android 上播放。所以，我的问题是：对于这个应用程序（重复简单、短促的点击声音以用作稳定的节拍器），我如何确保跨设备/浏览器流畅地播放音频？或者，也许更好的是，当想要播放重复的音频时，使用音频输入标签有哪些替代方法？我是一个新手，所以我对网络音频的了解目前仅此而已。任何指导（代码修复或试验的替代方法）将不胜感激。提前谢谢你。

Answer 1

音频标签非常不一致，如果您打算让您的应用适合移动设备，可能会变得非常棘手。

（另外，在 Chrome OSX 上测试，节拍并不总是在相同的间隔）

我强烈建议研究现有的库（最近写的一个，因为网络音频发展得非常快）

我知道一个非常简单的方法是Howler

它默认使用新的 Web 音频 API (mdn) 并具有 HTML5 音频标记后备。它还具有声音精灵，因此您可以执行以下操作：

var sound = new Howl({
  urls: ['sounds.mp3', 'sounds.ogg'],
  sprite: {
    tic: [0, 2000],
    toc: [3000, 700]
  }
});

var currNote = 1;
var currSignature = 4;
var timer = null;
var tempo = 120;

function click(){
    queue(tempo);
    if(currNote ===  currSignature){
        sound.play('toc');
        currNote = 0;
    }
    else{
        sound.play('tic');
    }
    currNote++;
}

function start(){
    clearTimeout(timer);
    queue(tempo);
}

function stop(){
    clearTimeout(timer);
}

function queue(tempo){
    timer = setTimeout(click, Math.round(((60/tempo)*1000)*100000) / 100000);
}

在此示例中，我每 4 次单击播放了第二种节拍（均来自一个单一的声音文件）。

另外：我喜欢避免间隔。我发现超时不仅更可靠，而且还提供更灵活的设计选项。