如何将一系列声音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

遵循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，这将是我们的回调。一旦我们有了拼写()，我们就可以尝试使用它了：

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

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

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

尝试调用startIt，您将看到它完成了它的任务。

这种方法允许我们将这些异步计算链接在一起。每一个好的JavaScript异步应用程序接口都允许您在计算成功后定义“下一步要做什么”。您可以编写自己的函数来做同样的事情。

Answer 2

使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 3

var count = 1;  //initialize and set counter
var clipstart = [0,10,20,30,40,50,60]; //initialize and set array of starting points
var clipend   = [5,15,25,35,45,55,65]; //initialize and set array of ending points
var clip = document.getElementById('clip'); //the clip you want to work with
var end; //initialize the current end point
var start; //initialize the current start point

function stop(){ //function to check if the clip needs to be stopped and asks for next track
  if(clip.currentTime >= end){
    clip.pause(); //pause playback
      //if it's not on the 2 iteration, and the there are still cues left ask for next track.
      if(!(count == 1 && clipstart.length == 0)){ 
          skip();
      }
  }
}

function play(){ //skip to start and play
  clip.currentTime = start;
  clip.play();
}

function skip(){ //sets the start and end points
  count++;
  if(count == 2){
    count = 0;
    start = clipstart.shift();
    end = clipend.shift();
  }  
  play();
}

skip();
clip.addEventListener('timeupdate', stop); //listens for if the clip is playing, and if it is, every second run the stop function.

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