Phonegap混音音频文件 [英] Phonegap mixing audio files

问题描述

我正在使用Phonegap为Ios建立一个卡拉OK应用程式。

I'm building a karaoke app using Phonegap for Ios.

我在www / assets文件夹中有音频文件，我可以使用媒体播放。 play（）函数

I have audio files in the www/assets folder that I am able to play using the media.play()function

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

This allows the user to listen to the backing track. While the media is playing another Media instance is recording.

录音完成后，我需要将声音录制文件放在背景轨道上，我不知道我该怎么做。

Once the recording has finished I need to lay the voice recording file over the backing track and I have no idea of how I might go about doing this.

我认为可能工作的一种方法是使用WEb Audio API - 我有从将两个文件加载到一个AudioContext，并允许我同时播放。然而，我想做的是将两个缓冲区写入单个.wav文件。有没有什么办法我可以结合source1和source2到一个单一的新文件？

One approach I thought might work is to use the WEb Audio API - I have the following code which I took from HTML5 Rocks Which loads up the two files into an AudioContext and allows me to play both simultaneously. However, what I would like to do is write the two buffers into a single .wav file. Is there any way I can combine source1 and source2 into a single new file?

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);
}

在此解决方案中可能有一些如何将音频数据阵列转换为wav文件？ / a>据我可以证明，他们是交错两个缓冲区，并将它们编码为.wav，但我不知道他们在哪里写他们到一个文件（保存新的wav文件）任何想法？

There might be something in this solution How do I convert an array of audio data into a wav file? As far as I can make out they are interleaving the two buffers and encoding them as a .wav but I can't figure out where they are writing them to a file (saving the new wav file) any ideas?

下面的答案 - 真的没有帮助，因为我使用Web Audio Api（javascript）不是IOS

The answer below - doesn't really help as I'm using Web Audio Api (javascript) not IOS

推荐答案

解决方案是使用offlineAudioContext

The solution was to use the offlineAudioContext

步骤是：
1.将这两个文件加载为缓冲区使用BufferLoader
2.创建一个OfflineAudioContext
3.将两个缓冲区连接到OfflineAudioContext
4.启动两个缓冲区
5.使用offline startRendering函数
6.设置offfline.oncomplete函数以获取renderedBuffer上的句柄。

The steps were: 1. Load the two files as buffers using the BufferLoader 2. Create an OfflineAudioContext 3. connect the two buffers to the OfflineAudioContext 4. start the two buffers 5. use the offline startRendering function 6. Set the offfline.oncomplete function to get a handle on the 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();

这篇关于Phonegap混音音频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！