Twilio.js结合Pitchshifter实现通话变音失效问题求助

我花了数小时排查一个问题：要在HTML页面实现复选框切换麦克风输入变音（保护隐私），用Twilio.js v2.12.1和Pitchshifter库开发。通话接通后控制台日志正常触发，但语音没有像Demo那样变音，怀疑是音频处理器连接方式不对，多次调整后传输的语音仍未被修改。目前先解决变音无效问题，再添加复选框开关。

核心问题分析 #

你的代码存在两处关键错误，导致变音效果无法作用到Twilio通话的音频流上：

• 变量混淆与连接对象错误：在_updateInputStreamSource方法中，你初始化得到pitchShifterNode，但实际连接时却用了全局变量pitchShifterProcessor，这种变量混用容易导致上下文错误，且后续连接逻辑完全偏离需求。
• 音频流路径错误：你把变音处理器的输出连接到了audioContext.destination（本地扬声器），但Twilio通话需要的是将处理后的音频流传入PeerConnection，而不是仅在本地播放。原始的麦克风流直接连接到了Twilio的分析器，没有经过变音处理就被发送出去，所以对方听到的还是原始语音。

修正后的代码方案 #

下面是调整后的关键代码部分，修复了连接逻辑并确保处理后的流被Twilio使用：

// 移除全局变量，改为在方法内维护处理器实例
var initProcessor = function (audioContext) {
    var validGranSizes = [256, 512, 1024, 2048, 4096, 8192];
    var grainSize = validGranSizes[1];
    var pitchRatio = 2.0;
    var overlapRatio = 0.50;

    var hannWindow = function (length) {
        var window = new Float32Array(length);
        for (var i = 0; i < length; i++) {
            window[i] = 0.5 * (1 - Math.cos(2 * Math.PI * i / (length - 1)));
        }
        return window;
    };

    var linearInterpolation = function (a, b, t) {
        return a + (b - a) * t;
    };

    var pitchShifterProcessor;
    if (audioContext.createScriptProcessor) {
        pitchShifterProcessor = audioContext.createScriptProcessor(grainSize, 1, 1);
    } else if (audioContext.createJavaScriptNode) {
        pitchShifterProcessor = audioContext.createJavaScriptNode(grainSize, 1, 1);
    }

    pitchShifterProcessor.buffer = new Float32Array(grainSize * 2);
    pitchShifterProcessor.grainWindow = hannWindow(grainSize);
    
    pitchShifterProcessor.onaudioprocess = function (event) {
        var inputData = event.inputBuffer.getChannelData(0);
        var outputData = event.outputBuffer.getChannelData(0);

        for (var i = 0; i < inputData.length; i++) {
            // 对输入缓冲区应用窗口函数
            inputData[i] *= this.grainWindow[i];

            // 偏移缓冲区的一半内容
            this.buffer[i] = this.buffer[i + grainSize];

            // 清空缓冲区尾部
            this.buffer[i + grainSize] = 0.0;
        }

        // 通过重采样和循环输入计算变音后的颗粒数据
        var grainData = new Float32Array(grainSize * 2);
        for (var i = 0, j = 0.0; i < grainSize; i++, j += pitchRatio) {
            var index = Math.floor(j) % grainSize;
            var a = inputData[index];
            var b = inputData[(index + 1) % grainSize];
            grainData[i] += linearInterpolation(a, b, j % 1.0) * this.grainWindow[i];
        }

        // 多次复制颗粒数据并叠加
        for (var i = 0; i < grainSize; i += Math.round(grainSize * (1 - overlapRatio))) {
            for (var j = 0; j <= grainSize; j++) {
                this.buffer[i + j] += grainData[j];
            }
        }

        // 输出缓冲区的前半部分
        for (var i = 0; i < grainSize; i++) {
            outputData[i] = this.buffer[i];
        }
    };

    return pitchShifterProcessor;
};

/**
* 更新流源为新的输入音频流
* @param {MediaStream} stream
* @private
*/
PeerConnection.prototype._updateInputStreamSource = function (stream) {
    if (this._inputStreamSource) {
        this._inputStreamSource.disconnect();
    }
    try {
        var audioContext = this._audioContext;
        this._inputStreamSource = audioContext.createMediaStreamSource(stream);
        
        // 初始化变音处理器
        var pitchShifterNode = initProcessor(audioContext);
        
        // 创建MediaStreamDestination，用于获取处理后的音频流
        var processedStreamDest = audioContext.createMediaStreamDestination();
        
        // 构建正确的音频流路径：麦克风源 → 变音处理器 → 处理后流目标
        this._inputStreamSource.connect(pitchShifterNode);
        pitchShifterNode.connect(processedStreamDest);
        
        // 将处理后的流传入Twilio的PeerConnection，替换原始流
        this.removeAllAudioTracks();
        this.addTrack(processedStreamDest.stream.getAudioTracks()[0]);
        
        // 保留原有的分析器连接（如果需要本地音频可视化）
        this._inputStreamSource.connect(this._inputAnalyser);
        this._inputStreamSource.connect(this._inputAnalyser2);
        
        console.log("变音处理器已连接，处理后的音频流已传入Twilio");
    }
    catch (ex) {
        console.log(ex);
        this._log.warn('Unable to update input MediaStreamSource', ex);
        this._inputStreamSource = null;
    }
};

关键调整说明 #

• 移除了全局的pitchShifterProcessor变量，避免上下文混淆，改用局部变量维护处理器实例。
• 添加了MediaStreamDestination，将变音处理后的音频转换为可被Twilio使用的MediaStream。
• 通过removeAllAudioTracks和addTrack方法，将Twilio PeerConnection的音频输入替换为处理后的流，确保通话中传输的是变音后的语音。
• 保留了原始流到分析器的连接，不影响本地音频可视化功能。

内容的提问来源于stack exchange，提问作者Keldeck Knight