Question

我正在构建一个网络应用程序，它允许用户收听乐器循环，然后录制人声。这都是使用Recorder.js工作但是有一些问题：

录制时存在延迟，因此需要在按下录制之前由用户设置。
导出的循环并不总是与采样率可能与所需时间不匹配的长度相同

然而从那以后我回到绘图板并问：对用户最好的是什么？。这给了我一套新的要求：

支持循环在后台持续播放
只要用户选择
录制然后与循环同步播放（循环之间的死区时间自动填充空白音频）
用户可以滑动偏移滑块以调整延迟
用户可以选择要保存的录像部分（与原始背景循环相同的长度）

这是一个如何看待的图表：

enter image description here

我到目前为止的逻辑：

// backing loop
a.startTime = 5
a.duration = 10
a.loop = true

// recording
b.startTime = 22.5
b.duration = 15
b.loop = false

// fill blank space + loop
fill = a.duration - (b.duration % a.duration) // 5
c = b.buffers + (fill * blankBuffers)
c.startTime = (context.currentTime - a.startTime) % a.duration
c.duration = 20
c.loop = true

// user corrects timing offset
c.startTime = ((context.currentTime - a.startTime) % a.duration) - offset

// user choose favourite loop
? this is where I start to lose the plot!

这是一个斩波从Recorder.js发送的缓冲区的例子：

// shorten the length of buffers
start = context.sampleRate * 2; // start at 2 seconds
end = context.sampleRate * 3; // end at 3 seconds
buffers.push(buffers.subarray(start, end));

以上版本的更多示例代码我一直致力于： https://github.com/mattdiamond/Recorderjs/issues/105

任何有关如何为导出的循环切片缓冲区或改进此逻辑的帮助都将非常感激！

更新

使用这个例子，我能够找到如何在录音中插入空格：

http://mdn.github.io/audio-buffer/

我现在设法几乎复制了我需要的功能，但是白噪声似乎已经消失了。在某个地方有误判吗？

http://kmturley.github.io/Recorderjs/loop.html

Answer 1

我设法通过编写以下逻辑来解决这个问题

diff = track2.startTime - track1.startTime
before = Math.round((diff % track1.duration) * 44100)
after = Math.round((track1.duration - ((diff + track2.duration) % track1.duration)) * 44100)
newAudio = [before data] + [recording data] + [after data]

在javascript代码中它看起来像这样：

var i = 0,
    channel = 0,
    channelTotal = 2,
    num = 0,
    vocalsRecording = this.createBuffer(vocalsBuffers, channelTotal),
    diff = this.recorder.startTime - backingInstance.startTime + (offset / 1000),
    before = Math.round((diff % backingInstance.buffer.duration) * this.context.sampleRate),
    after = Math.round((backingInstance.buffer.duration - ((diff + vocalsRecording.duration) % backingInstance.buffer.duration)) * this.context.sampleRate),
    audioBuffer = this.context.createBuffer(channelTotal, before + vocalsBuffers[0].length + after, this.context.sampleRate),
    buffer = null;

// loop through the audio left, right channels
for (channel = 0; channel < channelTotal; channel += 1) {
    buffer = audioBuffer.getChannelData(channel);
    // fill the empty space before the recording
    for (i = 0; i < before; i += 1) {
        buffer[num] = 0;
        num += 1;
    }
    // add the recording data
    for (i = 0; i < vocalsBuffers[channel].length; i += 1) {
        buffer[num] = vocalsBuffers[channel][i];
        num += 1;
    }
    // fill the empty space at the end of the recording
    for (i = 0; i < after; i += 1) {
        buffer[num] = 0;
        num += 1;
    }
}
// now return the new audio which should be the exact same length
return audioBuffer;

您可以在此处查看完整的工作示例：

http://kmturley.github.io/Recorderjs/loop.html

录制音频，同步到循环，偏移延迟和导出部分

1 个答案: