ios - Phonegap 混合音频文件

Question

我正在使用 Phonegap for Ios 构建卡拉 OK 应用。

我可以使用 media.play() 函数播放 www/assets 文件夹中的音频文件

这允许用户收听背景音轨。当媒体正在播放时，另一个媒体实例正在录制。

录音完成后，我需要将录音文件放在背景音轨上，但我不知道该如何去做。

我认为可能有效的一种方法是使用 WEb 音频 API - 我有以下代码，这些代码来自 HTML5 Rocks它将两个文件加载到一个 AudioContext 中，并允许我同时播放这两个文件。但是，我想做的是将两个缓冲区写入一个 .wav 文件。有什么办法可以将 source1 和 source2 合并到一个新文件中吗？

var context;
var bufferLoader;

function init() {
    // Fix up prefixing
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();

    bufferLoader = new BufferLoader(
        context,
        [
            'backingTrack.wav',
            'voice.wav',
        ],
        finishedLoading
    );

    bufferLoader.load();
}

function finishedLoading(bufferList) {
    // Create two sources and play them both together.
    var source1 = context.createBufferSource();
    var source2 = context.createBufferSource();
    source1.buffer = bufferList[0];
    source2.buffer = bufferList[1];

    source1.connect(context.destination);
    source2.connect(context.destination);
    source1.start(0);
    source2.start(0);
}


function BufferLoader(context, urlList, callback) {
    this.context = context;
    this.urlList = urlList;
    this.onload = callback;
    this.bufferList = new Array();
    this.loadCount = 0;
}

BufferLoader.prototype.loadBuffer = function(url, index) {
    // Load buffer asynchronously
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";

    var loader = this;

    request.onload = function() {
        // Asynchronously decode the audio file data in request.response
        loader.context.decodeAudioData(
            request.response,
            function(buffer) {
                if (!buffer) {
                    alert('error decoding file data: ' + url);
                    return;
                }
                loader.bufferList[index] = buffer;
                if (++loader.loadCount == loader.urlList.length)
                    loader.onload(loader.bufferList);
            },
            function(error) {
                console.error('decodeAudioData error', error);
            }
        );
    }

    request.onerror = function() {
        alert('BufferLoader: XHR error');
    }

    request.send();
}

BufferLoader.prototype.load = function() {
    for (var i = 0; i < this.urlList.length; ++i)
        this.loadBuffer(this.urlList[i], i);
}

这个解决方案中可能有一些东西 How do I convert an array of audio data into a wav file?据我所知，他们正在交错两个缓冲区并将它们编码为 .wav 但我无法弄清楚他们将它们写入文件的位置(保存新的 wav 文件)有什么想法吗？

下面的答案 - 并没有真正帮助，因为我使用的是 Web Audio Api(javascript)而不是 IOS

Answer 1

解决方案是使用 offlineAudioContext

步骤是:1. 使用 BufferLoader 将两个文件加载为缓冲区2.创建一个OfflineAudioContext3. 将两个缓冲区连接到 OfflineAudioContext4.启动两个缓冲区5.使用离线startRendering函数6. 设置 offline.oncomplete 函数以获取 renderedBuffer 的句柄。

代码如下:

offline = new webkitOfflineAudioContext(2, voice.buffer.length, 44100);
vocalSource = offline.createBufferSource();
vocalSource.buffer = bufferList[0];
vocalSource.connect(offline.destination);

backing = offline.createBufferSource();
backing.buffer = bufferList[1];
backing.connect(offline.destination);

vocalSource.start(0);
backing.start(0);

offline.oncomplete = function(ev){
    alert(bufferList);
    playBackMix(ev);
    console.log(ev.renderedBuffer);
    sendWaveToPost(ev);
}
offline.startRendering();