Node.js无需外部应用，浏览器直接播放音频的轻量化方案咨询

我当前使用gTTS将文本转换为MP3文件，再通过playsound调用外部应用播放音频。现希望无需额外应用，直接在浏览器中播放音频，请问有哪些更轻量化的实现方案？当前实现代码如下：

// setup txt to speach    
var question = result.data.que;
var reply = result.data.ans;

const gtts = new gTTS(question, 'en');
const gttr = new gTTS(reply, 'en');

// text to speach conversion
gtts.save("question.mp3", function (err, result){
    if(err) { throw new Error(err); }
    console.log("Text to speech converted!");
});

gttr.save("reply.mp3", function (err, result){
    if(err) { throw new Error(err); }
    console.log("Text to speech converted!");
});


// playing sound 
const player = playsound();

const soundPath1 = './question.mp3';
player.play(soundPath1, (err) => {
    if (err) {
        console.error('Error playing sound:', err);
    }
});

const player2 = playsound();
const soundPath2 = './reply.mp3';
player2.play(soundPath2, (err) => {
    if (err) {
        console.error('Error playing sound:', err);
    }
});

轻量化实现方案 #

方案1：浏览器原生Web Speech API（零依赖首选） #

直接用浏览器自带的SpeechSynthesis接口，完全不需要任何外部库，纯前端就能实现文本转语音播放，是最轻量化的方案。

// 封装文本播放函数
function speakText(text, lang = 'en') {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = lang;
  // 可额外配置语速、音量
  // utterance.rate = 1.2; // 语速范围0.1-10
  // utterance.volume = 0.8; // 音量范围0-1
  window.speechSynthesis.speak(utterance);
  return utterance;
}

// 使用示例：先播问题，播完再播回复
const question = result.data.que;
const reply = result.data.ans;

const questionUtterance = speakText(question);
questionUtterance.onend = () => {
  speakText(reply);
};

• 优点：零依赖、无文件生成、代码极简，主流浏览器都支持。
• 注意：不同浏览器的语音引擎音色有差异，可通过speechSynthesis.getVoices()获取可选音色切换。

方案2：改进gTTS用法，直接生成Blob在浏览器播放 #

如果偏好谷歌TTS的音色，不想换引擎，可以不用保存本地MP3，直接把gTTS生成的音频流转成Blob，用浏览器的Audio元素播放，完全不需要外部播放器。

import gTTS from 'gtts'; // 前端构建环境下需先安装引入

function playGTTS(text, lang = 'en') {
  return new Promise((resolve, reject) => {
    const gtts = new gTTS(text, lang);
    const audioChunks = [];
    
    // 收集音频流数据
    gtts.stream()
      .on('data', chunk => audioChunks.push(chunk))
      .on('end', () => {
        // 生成Blob对象并创建播放链接
        const audioBlob = new Blob(audioChunks, { type: 'audio/mpeg' });
        const audioUrl = URL.createObjectURL(audioBlob);
        
        // 创建Audio元素播放
        const audio = new Audio(audioUrl);
        audio.play().then(resolve).catch(reject);
        
        // 播放结束后释放URL资源，避免内存泄漏
        audio.onended = () => URL.revokeObjectURL(audioUrl);
      })
      .on('error', reject);
  });
}

// 使用示例：按顺序播放问题和回复
const question = result.data.que;
const reply = result.data.ans;

playGTTS(question)
  .then(() => playGTTS(reply))
  .catch(err => console.error('播放出错:', err));

• 优点：保留gTTS的语音质量，无需本地文件，直接在浏览器内处理。
• 注意：原版gTTS是Node.js库，前端使用可改用专门的前端版本如gtts-browser。

方案3：轻量级前端TTS库（如responsivevoice.js） #

如果需要更多音色选择、自定义配置，又不想处理原生API的差异，可以用体积小巧的前端TTS库，直接本地引入使用。

<!-- 本地引入库文件（建议下载到本地，避免依赖外链） -->
<script src="./responsivevoice.js"></script>

<script>
const question = result.data.que;
const reply = result.data.ans;

// 播放问题（指定音色）
responsiveVoice.speak(question, 'US English Male');
// 监听播放结束，再播放回复
responsiveVoice.onended = () => {
  responsiveVoice.speak(reply, 'US English Female');
};
</script>

• 优点：使用简单，内置多种音色、语速配置，无需后端支持。
• 注意：若不想用外链，直接下载库文件到项目目录中引入即可。

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