javascript - 网络音频 Api 输出

标签 javascript html api web-audio-api

我正在开发一个基于社区的网络广播,用户可以在其中录制自己的消息。

我希望我的用户能够为他们的录音添加效果(例如双二阶滤波器、混响等等)

是否可以将最终混音(包括效果)处理为单个 PCM 输出(例如音频标签 src="data:audio/wav;base64")以便我可以发送通过邮寄混音到服务器?

我试过这个:

recorder.locals.filter1.connect(recorder.locals.filter3);
recorder.locals.filter3.connect(recorder.locals.filter2);
recorder.locals.filter2.connect(context.destination); 
recorder.locals.source.noteOn(0); 
context.oncomplete = function(e) { var buffer = e.renderedBuffer; }; 
context.startRendering(); 

但它没有给我任何东西。

最佳答案

我找到了一个解决方案。似乎在使用 startRendering() 时,您必须在创建时向上下文提供 durationsamplerate

(new webkitAudioContext(channels, duration * samplerate, samplerate);

这是我生成预渲染的 audioBuffer 并将其转换为 base64 wav 的解决方案。

var audioBuffer = audio.createBuffer(arrayBuffer, false), /* <- Input Audio */
    offlineContext = new webkitAudioContext(1, audioBuffer.duration * 44100, 44100);

offlineContext.oncomplete = function(event) {

    var buffer   = event.renderedBuffer;    
    var UintWave = createWaveFileData(buffer);
    var base64   = btoa(uint8ToString(UintWave));

    document.getElementById("audio").src = "data:audio/wav;base64," + base64;

};

var source  = offlineContext.createBufferSource();
source.buffer = audioBuffer;
var gain = offlineContext.createGainNode();
// Effects
var filter1 = offlineContext.createBiquadFilter();
filter1.type = 2;
filter1.frequency.value = 4000;
filter1.Q.value = 0.1;
// Connect
source.connect(filter1);
filter1.connect(gain);
gain.connect(offlineContext.destination);

source.noteOn(0);
offlineContext.startRendering(); 

function createWaveFileData(audioBuffer) {

    var frameLength = audioBuffer.length;
    var numberOfChannels = audioBuffer.numberOfChannels;
    var sampleRate = audioBuffer.sampleRate;
    var bitsPerSample = 16;
    var byteRate = sampleRate * numberOfChannels * bitsPerSample/8;
    var blockAlign = numberOfChannels * bitsPerSample/8;
    var wavDataByteLength = frameLength * numberOfChannels * 2; // 16-bit audio
    var headerByteLength = 44;
    var totalLength = headerByteLength + wavDataByteLength;

    var waveFileData = new Uint8Array(totalLength);

    var subChunk1Size = 16; // for linear PCM
    var subChunk2Size = wavDataByteLength;
    var chunkSize = 4 + (8 + subChunk1Size) + (8 + subChunk2Size);

    writeString("RIFF", waveFileData, 0);
    writeInt32(chunkSize, waveFileData, 4);
    writeString("WAVE", waveFileData, 8);
    writeString("fmt ", waveFileData, 12);

    writeInt32(subChunk1Size, waveFileData, 16);      // SubChunk1Size (4)
    writeInt16(1, waveFileData, 20);                  // AudioFormat (2)
    writeInt16(numberOfChannels, waveFileData, 22);   // NumChannels (2)
    writeInt32(sampleRate, waveFileData, 24);         // SampleRate (4)
    writeInt32(byteRate, waveFileData, 28);           // ByteRate (4)
    writeInt16(blockAlign, waveFileData, 32);         // BlockAlign (2)
    writeInt32(bitsPerSample, waveFileData, 34);      // BitsPerSample (4)

    writeString("data", waveFileData, 36);            
    writeInt32(subChunk2Size, waveFileData, 40);      // SubChunk2Size (4)

    // Write actual audio data starting at offset 44.
    writeAudioBuffer(audioBuffer, waveFileData, 44);

    return waveFileData;

}   

function writeString(s, a, offset) {
    for (var i = 0; i < s.length; ++i) {
        a[offset + i] = s.charCodeAt(i);
    }
}

function writeInt16(n, a, offset) {
    n = Math.floor(n);

    var b1 = n & 255;
    var b2 = (n >> 8) & 255;

    a[offset + 0] = b1;
    a[offset + 1] = b2;
}

function writeInt32(n, a, offset) {
    n = Math.floor(n);
    var b1 = n & 255;
    var b2 = (n >> 8) & 255;
    var b3 = (n >> 16) & 255;
    var b4 = (n >> 24) & 255;

    a[offset + 0] = b1;
    a[offset + 1] = b2;
    a[offset + 2] = b3;
    a[offset + 3] = b4;
}

function writeAudioBuffer(audioBuffer, a, offset) {
    var n = audioBuffer.length;
    var channels = audioBuffer.numberOfChannels;

    for (var i = 0; i < n; ++i) {
        for (var k = 0; k < channels; ++k) {
            var buffer = audioBuffer.getChannelData(k);
            var sample = buffer[i] * 32768.0;

            // Clip samples to the limitations of 16-bit.
            // If we don't do this then we'll get nasty wrap-around distortion.
            if (sample < -32768)
                sample = -32768;
            if (sample > 32767)
                sample = 32767;

            writeInt16(sample, a, offset);
            offset += 2;
        }
    }
}

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

如果有人想出更简单或更短的方法来做到这一点,那就太好了!

关于javascript - 网络音频 Api 输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12822652/

相关文章:

android - 我应该同时填写浏览器 key 和安卓 key 吗?

.net - Guid.Empty 应该导致 ArgumentException 或 ArgumentOutOfRangeException

c# - 用于选择/取消选择的 Javascript 函数选中 radgrid 标题模板中的所有复选框

javascript - 根据数组元素的总和对数组中的元素进行排序

javascript - 为什么我的 jest 测试在本地运行,而不是在 Travis 上运行?

php - 如何从 html 表单发布到 Facebook 页面

api - 谷歌地图 API v3 带有信息窗口的多个跳跃位置标记

javascript - 相同条件下的多个 onclick 函数

jquery - 如何使用 jquery 将文本添加到现有的 div

javascript - Google IMA SDK 的 HTML 5 问题