如何按顺序排列一系列声音HTML5 <audio>声音片段？

Question

我正在尝试将名为VoiceWalker的简单音频实用程序移植到Javascript.VoiceWalker是一个帮助人们录制音频的工具,它的工作原理如下:

http://i.imgur.com/rafgl.png

因此,它的想法是它播放了一些,重复它,向前滑动,再次播放,重复播放,向前滑动等等.

我拼凑了一个函数来播放声音片段,它看起来像这样:

function clip(audio, start, stop){
    audio.currentTime = start;
    audio.play();
    int = setInterval(function() {
        if (audio.currentTime > stop) {
            audio.pause();
            clearInterval(int);
        }
    }, 10);
}    

提出一个与上述模式匹配的开始/停止时间列表是一个简单的命题,但是有一个问题:我如何排队我的clip()呼叫,以便只有在另一个停止后才能运行？

Answer 1

请clip拨打本身:

function clip(audio, start, stop){
    audio.currentTime = start;
    audio.play();
    int = setInterval(function() {
        if (audio.currentTime > stop) {
            audio.pause();
            clearInterval(int);
            // Play it again, 2 seconds further.
            clip(audio, start + 2, stop + 2);
        }
    }, 10);
}

Answer 2

遵循JavaScript中其他API的结构:让剪辑功能也采用"下一步做什么"功能.(更多技术术语:"回调").我们的想法是你的剪辑功能知道它的工作何时完成,然后可以在合适的时间调用回调.

举个例子,假设我们有一个函数可以慢慢拼出一个单词给文档的正文:

var spell = function(word, onSuccess) {
    var i = 0;
    var intervalId = setInterval(function() { 
                    if (i >= word.length) { 
                        clearInterval(intervalId);
                        onSuccess();
                    } else {
                        document.body.appendChild(
                            document.createTextNode(word.charAt(i)));
                        i++;
                    }
                }, 100)
};

当这个计算完成拼写单词时,它将调用onSuccess,这将是我们的回调.一旦我们有了spell(),我们就可以尝试使用它:

var startIt = function() {
    spell("hello", afterHello);
};

var afterHello = function() {
    spell("world", afterHelloWorld);
};

var afterHelloWorld = function() {
    alert("all done!"); 
};

尝试调用startIt,你会发现它做了它的事情.

这种方法允许我们将这些异步计算链接在一起.每个好的JavaScript异步API都允许您在计算成功后定义"下一步做什么".您可以编写自己的函数来执行相同的操作.