Question

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

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次点击就进行了第二种节拍（均来自一个声音文件）。

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

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

1 个答案: