Question

使用音频元素（<audio>）或上下文（AudioContext）时，您可以检查其currentTime属性以确切了解缓冲区的播放时间。

在我在一个AudioBufferSourceNode中创建多个来源（或AudioContext）之前，这一切都很好。

可以在不同时间播放来源，因此我需要知道相应的currentTime，以说明：

一些基本代码供你解决：

buffer1 = [0,1,0]; //not real buffers
buffer2 = [1,0,1];

ctx = new AudioContext();

source1 = ctx.createBufferSourceNode();
source1.buffer = buffer1;
source1.connect(ctx.destination);
source1.start(0);

source2 = ctx.createBufferSourceNode();
source2.buffer = buffer2;
source2.connect(ctx.destination);
setTimeout(1000/*some time later*/){
    source2.start(0);
}

setTimeout(1500/*some more time later*/){
    getCurrentTime();
}

function getCurrentTime(){
    /* magic */
    /* more magic */
    console.log("the sources currentTime values are obviously 1500 (source1) and 500 (source2).");
}

Answer 1

我通常做的是为音频源节点创建一个包装器来跟踪播放状态。我已尝试尽量减少以下代码以显示基础知识。

核心思想是跟踪声音开始的时间以及声音暂停的时间＆＃39;并使用这些值来获取当前时间并从暂停位置恢复播放。

我放了working example on codepen

function createSound(buffer, context) {
    var sourceNode = null,
        startedAt = 0,
        pausedAt = 0,
        playing = false;

    var play = function() {
        var offset = pausedAt;

        sourceNode = context.createBufferSource();
        sourceNode.connect(context.destination);
        sourceNode.buffer = buffer;
        sourceNode.start(0, offset);

        startedAt = context.currentTime - offset;
        pausedAt = 0;
        playing = true;
    };

    var pause = function() {
        var elapsed = context.currentTime - startedAt;
        stop();
        pausedAt = elapsed;
    };

    var stop = function() {
        if (sourceNode) {          
            sourceNode.disconnect();
            sourceNode.stop(0);
            sourceNode = null;
        }
        pausedAt = 0;
        startedAt = 0;
        playing = false;
    };

    var getPlaying = function() {
        return playing;
    };

    var getCurrentTime = function() {
        if(pausedAt) {
            return pausedAt;
        }
        if(startedAt) {
            return context.currentTime - startedAt;
        }
        return 0;
    };

    var getDuration = function() {
      return buffer.duration;
    };

    return {
        getCurrentTime: getCurrentTime,
        getDuration: getDuration,
        getPlaying: getPlaying,
        play: play,
        pause: pause,
        stop: stop
    };
}

Answer 2

旧线程（非常有用！谢谢！），但也许值得一提的是在example above中而不是

function update() {
    window.requestAnimationFrame(update);
    info.innerHTML = sound.getCurrentTime().toFixed(1) + '/' + sound.getDuration().toFixed(1);
    }
update();

使用createScriptProcessor可能更精确，占用资源更少如this post

中所述

const audioBuffer = await audioContext.decodeAudioData(response.data);
const chan = audioBuffer.numberOfChannels;
const  scriptNode = audioContext.createScriptProcessor(4096, chan, chan);
scriptNode.connect(audioContext.destination);
scriptNode.onaudioprocess = (e) => {

  // ---> audio loop <----

};

[更新]

注意：自2014年8月29日Web Audio API规范发布以来，此功能已被标记为已弃用，并已由AudioWorklet取代（请参阅AudioWorkletNode）。 https://developers.google.com/web/updates/2017/12/audio-worklet

如何获得AudioBufferSourceNode的当前时间？

2 个答案: