如何在使用网络音频 API 播放曲目时向前跳过 n 秒?

And*_* R. 1 audiobuffer audiocontext web-audio-api

使用 Web Audio API,我正在尝试构建具有“向前跳过 15 秒”功能的 mp3 播放器。

我能够使用源缓冲区加载 mp3,并可以让它开始播放。我想做这样的事情,虽然我知道 currentTime 不是一个可设置的属性:

context.currentTime += 15
Run Code Online (Sandbox Code Playgroud)

一旦歌曲已经播放,你如何向前跳过 n 秒?

chr*_*din 5

不幸的是,没有单一的 API 调用可以达到预期的效果,但它是可行的。每个AudioBufferSourceNode只能使用一次,这就是为什么我们必须创建一个新的才能改变某些东西。

假设我们有两个变量来自某个地方,名为audioContextaudioBuffer。此外,我们还定义了两个变量来存储初始值startTime和当前运行的AudioBufferSourceNode.

let audioBufferSourceNode;
let startTime;
Run Code Online (Sandbox Code Playgroud)

我们第一次玩的时候,我们audioBuffer直接从头开始玩。这里唯一特别的是我们保留了对audioBufferSourceNode并且我们记住了startTime

audioBufferSourceNode = audioContext.createBufferSource();
audioBufferSourceNode.buffer = audioBuffer;
audioBufferSourceNode.connect(audioContext.destination);
startTime = context.currentTime;
audioBufferSourceNode.start(startTime);
Run Code Online (Sandbox Code Playgroud)

如果您想在一段时间后跳过先前开始的 audioBufferSourceNode需要先停止。

const currentTime = context.currentTime;

audioBufferSourceNode.stop(currentTime);
audioBufferSourceNode.disconnect();
Run Code Online (Sandbox Code Playgroud)

此外,需要通过重用相同的方法来创建一个新的 audioBuffer以前。这里唯一的区别是我们应用了一个偏移量来确保它提前 15 秒。

audioBufferSourceNode = audioContext.createBufferSource();
audioBufferSourceNode.buffer = audioBuffer;
audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start(currentTime, currentTime - startTime + 15);
Run Code Online (Sandbox Code Playgroud)

为了准备跳过另一个时间,有必要更新 startTime.

startTime -= 15;
Run Code Online (Sandbox Code Playgroud)

这当然是一个过于简单的例子。实际上,应该进行检查以确保有足够的音频数据可以跳过。您还可以在跳过时应用一点淡入/淡出以避免咔嗒声。... 这只是为了说明一般的想法。