javascript - 从缓冲区播放声音

标签 javascript html api buffer microphone

我正在尝试构建一个实时语音通话应用程序。我的目标是使用原生 JS 麦克风 api 并通过 websocket 将数据发送到其他客户端。我想出了以下代码:

<script>
// Globals
var aCtx;
var analyser;
var microphone;

navigator.getUserMedia_ = (   navigator.getUserMedia
                           || navigator.webkitGetUserMedia 
                           || navigator.mozGetUserMedia 
                           || navigator.msGetUserMedia);

if (navigator.getUserMedia_) {
    navigator.getUserMedia_({audio: true}, function(stream) {
        aCtx = new webkitAudioContext();
        analyser = aCtx.createAnalyser();
        microphone = aCtx.createMediaStreamSource(stream);
        microphone.connect(analyser);
        process();
    });
};
function process(){
    console.log(analyser);
    setInterval(function(){
        FFTData = new Float32Array(analyser.frequencyBinCount);
        analyser.getFloatFrequencyData(FFTData);

        console.log(FFTData); // display
    },10);
}

</script>

所以我每 10 毫秒就会获取缓冲区并通过节点发送它。问题是我不知道如何播放缓冲区,我什至不确定我是否以正确的方式获取缓冲区。我试过:

var source = audioContext.createBufferSource();
var buffer; // the result printed in the code below
var audioBuffer = audioContext.createBuffer(1, buffer.length, 44100);
audioBuffer.getChannelData(0).set(buffer);
source.buffer = audioBuffer;
source.connect(audioContext.destination);

我的缓冲是否正确?怎么玩?

最佳答案

要发出缓冲区的播放,您必须调用 start method在您的 AudioBufferSourceNode 实例上。这里的问题是:你想播放一个音频流,一个AudioBuffer。不是为此而设计的。如果您继续创建 AudioBuffer 对象,用数据填充它们并将它们提供给您的 AudioBufferSourceNode 实例,肯定会有明显的声音停顿。

您应该保留一个缓存缓冲区,在数据到达后立即填充它并以正常速度清空它(不是立即,您必须等待其中有足够多的音频)。

执行此操作的最佳方法是使用提供的正确 API:查看 http://www.w3.org/TR/webaudio/#MediaStreamAudioDestinationNode-sectionhttp://www.w3.org/TR/webaudio/#MediaStreamAudioSourceNode-section .

关于javascript - 从缓冲区播放声音,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19894259/

相关文章:

javascript - 使用 anchor 标签平滑滚动时左右轮播控件不起作用

html - 平铺一百个 1px 的方 block VS 平铺四个 25px 的方 block

api - PayPal 开发者账户和 API ..如果账户受限会怎样?

android - android 3 (API <=11) 组件中的新可选 TextView

javascript - 我无法使用 Angular 从 API 检索数据

javascript - 我如何使用 "document.location.href"& 在同一个元素中有一个不激活它的按钮

javascript - Vue 和 CSS3 : absolute position in a relative wrapper messes up height

css - 用视频替换整页图像背景 (HTML5)

javascript - 聚焦元素时,页面不会在 Firefox 和 IE 中滚动?

api - `Google Speech API Key` 在哪里?