Javascript 如何将一系列声音HTML5排队<；音频>；要按顺序播放的声音片段？

我正在尝试将一个简单的音频实用程序移植到Javascript。VoiceWalker是一种帮助人们转录音频的工具，其工作原理如下：

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

所以这里的想法是，它播放一点，重复，向前移动，播放另一点，重复，向前移动，等等

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

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

---

列出与上述模式匹配的开始/停止时间列表很容易，但有一个问题：如何将

clip（）

调用排队，以便一个调用只在另一个停止后运行

Make

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);
}

---

看看它，它可以应用于音频或视频元素。

遵循JavaScript中其他API的结构：让clip函数也包含“下一步要做什么”函数。（更专业的术语：“回调”）。其思想是clip函数知道何时完成其工作，然后可以在正确的时间调用回调

例如，假设我们有一个函数，它将缓慢地向文档正文拼写一个单词：

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都允许您在计算成功后定义“下一步要做什么”。您可以编写自己的函数来完成同样的操作。

这里有一个模块，它可以完成您想要的操作

设置为播放两次剪辑的两秒钟，中间有一个短暂的暂停，然后将起点向前推进半秒钟，再次短暂暂停，然后从新的起点开始播放下一个两秒钟，依此类推。（您可以在顶部的属性中非常轻松地更改这些设置）

这段代码期望有一个id为“debug”的html元素——我为此使用了一个段落。如果愿意，可以删除对此元素的所有引用。（其中有四行，一行开始于var d…，三行开始于d.innerHTML…）

---

谢谢，我终于明白了如何用Javascript异步执行操作。

var VOICEWALKER = (function () {
// properties
var d = document.getElementById("debug");
var audio = document.getElementsByTagName('audio')[0];
var start = 0;
var stop = 2;
var advanceBy = 0.5;
var pauseDuration = 500; // milliseconds between clips
var intv; // reference to the setInterval timer
var clipCount = 0; // how many times we have played this part of the clip
var clipMax = 2; // how many times we shall play this part of the clip

// methods
var pauseFinished = function () {
    d.innerHTML = "Pause finished";
    clip();
};

var pollClip = function () {

    d.innerHTML = String(audio.currentTime);

    if (audio.currentTime > stop) {
        audio.pause();
        d.innerHTML = "Pause";
        clearInterval(intv);

        clipCount += 1;
        if (clipCount === clipMax) {
            clipCount = 0;
            // advance clip
            start += advanceBy;
            stop += advanceBy;
        }

        // pause a little
        setTimeout(pauseFinished, pauseDuration);
    }


};

var clip = function () {
    audio.currentTime = start;
    audio.play();
    intv = setInterval(pollClip, 10);
};

var init = function () {
    audio.addEventListener('canplaythrough', clip, false);
};

return {
    init : init
};
}());

VOICEWALKER.init();