如何结合Speech Synthesis与Web Audio API实现文本转语音可视化？

我正在尝试开发一个音频可视化器，使其能在**文本转语音(TTS)**播放过程中实现实时可视化。基于一个音频可视化项目开发，已成功在页面左上角实现TTS功能，但无法将TTS音频与可视化功能关联起来。

初始Three.js音频加载代码 #

const listener = new THREE.AudioListener();
camera.add(listener);

const audioLoader = new THREE.AudioLoader();
audioLoader.load('./assets/Beats.mp3', function(buffer) {
    sound.setBuffer(buffer);
    window.addEventListener('click', function() {
        sound.play();
    });
});

我的文本转语音实现代码 #

const audioContext = new (window.AudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 32;
const dataArray = new Uint8Array(analyser.frequencyBinCount);

const gainNode = audioContext.createGain();
gainNode.connect(analyser);
analyser.connect(audioContext.destination);

// Text to Speech setup
const tts = new SpeechSynthesisUtterance();
tts.lang = 'en-US';
const synth = window.speechSynthesis;

function speak(text) {
    tts.text = text;
    tts.volume = 100;
    synth.cancel();
    synth.speak(tts);

    const ttsStream = audioContext.createMediaStreamDestination();
    const ttsSource = audioContext.createMediaStreamSource(ttsStream.stream);
    ttsSource.connect(gainNode);

    tts.onstart = () => {
        // Capture TTS audio to the analyser
        const source = audioContext.createMediaStreamSource(ttsStream.stream);
        source.connect(gainNode);
    };
}

// Update the analyser with frequency data
function updateFrequency() {
    analyser.getByteFrequencyData(dataArray);
    let average = dataArray.reduce((a, b) => a + b) / dataArray.length;
    uniforms.u_frequency.value = average;
    requestAnimationFrame(updateFrequency);
}
updateFrequency();

const gui = new GUI();

// Example usage
document.getElementById('speakButton').addEventListener('click', () => {
    let text = document.getElementById('textInput').value;
    speak(text);
});

我查阅了Speech Synthesis和Web Audio API的相关资料，但仍不清楚音频节点的正确连接方式。MP3是连续的音频流，而TTS是分段合成的，这一点让我感到困惑。

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