Web Audio API和播放音频文件时的实际当前时间

Question

当我想知道使用Web Audio API播放文件的当前时间时,我遇到了问题.我的代码很好地播放文件getCurrentTime(),当涉及快速加载的短文件时,函数返回的当前时间足够准确.

但是当我尝试加载大文件时,有时getCurrentTime()函数返回的当前时间是准确的,有时则不然.有时,等待20秒后听到文件播放,当它开始播放时,它表示当前时间约为20秒(这不是真的,因为它只是播放文件的开头).它适用于任何音频格式(OGG,MP3,WAV ......),但有时只是.

我正在使用一个慢速系统(华硕EEE PC 901与Intel Atom 1.60 Ghz和2 GB RAM与Windows XP Home Edition和SP3)和Firefox 41.0.1.

我不确定,但似乎该source.start()方法开始播放声音的方式太晚了,所以调用该方法之后的行,我设置startTime变量的值,并不是真正的开始时间.

这是代码(简化):

var context, buffer, startTime, source;
var stopped = true;
function load(file, startAt)
{
    //Here creates the AudioContext and loads the file through XHR (AJAX) and gets the buffer. All works fine.
    //When it gots the buffer through XHR (AJAX) and all is fine, it calls play(startAt) function immediately.
    //Note: normally, startAt is 0.
}

function play(startAt)
{
    source = context.createBufferSource(); //Context created before.
    source.buffer = buffer; //Buffer got before from XHR (AJAX).

    //Creates a gain node to be able to set the volume later:
    var gainNode = context.createGain();
    source.connect(gainNode);
    gainNode.connect(context.destination);

    //Plays the sound:
    source.loop = false;
    source.start(startAt, 0, buffer.duration - 3); //I don't want the last 3 seconds.

    //Stores the start time (useful for pause/resume):
    startTime = context.currentTime - startAt; //Here I store the startTime but maybe the file has still not begun to play (should it be just startTime = context.currentTime?).
    stopped = false;
}

function stop()
{
    source.stop(0);
    stopped = true;
}

function getCurrentTime()
{
    return (stopped) ? 0 : context.currentTime - startTime;
}

如何检测source.start()方法何时开始播放文件？所以我可以startTime在那一刻设置变量值,而不是之前.

非常感谢你提前.我真的很感激任何帮助.

Answer 1

来自MDN（https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start），关于函数的第一个参数start()：

when（选修的）

声音应开始播放的时间（以秒为单位），采用 AudioContext 使用的同一时间坐标系。如果when小于(AudioContext.currentTime，或者为0，则立即开始播放声音。默认值为0。

您的代码没有明显的问题（尽管没有调用 的示例play()）：如果您调用play(0)或play(context.currentTime + someDelayInSeconds)，start()应该按预期运行。不幸的是，这里的问题是 AudioBufferSource 不适用于大文件。再次来自 AudioBuffer 的 MDN 文档（https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer）：

这些类型的对象被设计为保存小的音频片段，通常小于 45 秒。

我怀疑对于大的东西来说，“声音立即开始播放”的假设不太适用（我也经历过，尽管 20 秒似乎太多了......）。不幸的是，目前还没有办法获得 WebAudio 中 AudioBufferSource 的准确开始时间。

如果您没有任何真正的理由使用 AudioBufferSource 加载这个大文件，我建议您使用 MediaElementSourceNode ( https://developer.mozilla.org/en-US/docs/Web/API/MediaElementAudioSourceNode )：尽可能从链接文档的示例中可以看出，它允许您将一个简单的 HTML5Audio元素插入 AudioContext。然后，您可以对元素本身进行所有常规控制，即您还可以访问该audioElement.currentTime属性，该属性告诉您当前的播放时间（在本例中是文件本身，这就是您所需要的）。此外，您不必处理将文件加载到内存中的问题，只要有一些数据可用，就可以开始播放。

Answer 2

context.currentTime从创建上下文对象的那一刻开始计数。这意味着如果您的音频加载需要 20 秒，context.currentTime == 20.

为了解决这种延迟，您可以设置一个简单的计时器，从创建上下文到音频加载完成。

var context; //Create your context here
var audioLoadStart = new Date();
//Do audio load
var audioLoadOffset = (new Date() - audioLoadStart) / 1000;
currentTime = context.currentTime - audioLoadOffset - startTime;