JavaScript如何正确获取TTS网站的音频输出并实现播放

• 依赖不匹配：request是Node.js服务端专用的第三方HTTP库，浏览器环境无法引入，且该场景完全不需要提前手动发起HTTP请求
• URL拼接错误：你在编码后的文本外层额外加了单引号，会导致传给TTS接口的文本前后多出单引号字符，生成的音频内容不符合预期
• 编码方法使用不当：encodeURI不会转义&、?等URL特殊字符，文本中出现这类字符时会截断参数，应该用encodeURIComponent
• 触发逻辑不符合浏览器策略：现代浏览器默认禁止非用户交互触发的音频自动播放，直接在请求回调里调用play()大概率会被安全策略拦截
• 逻辑冗余：该TTS接口直接返回音频流，原生Audio对象支持直接传入音频地址完成加载播放，不需要额外发请求预取资源

浏览器端（最常用场景，无需任何第三方依赖） #

直接通过用户交互（比如按钮点击）触发，传入拼接好的合法音频地址即可：

<!-- 页面示例结构 -->
<input type="text" id="ttsInput" placeholder="输入要转换的文本">
<button id="playBtn">播放语音</button>

<script>
function tts(text) {
  // 直接拼接合法URL，不要加多余的单引号
  const audioSrc = `https://tts.cyzon.us/tts?text=${encodeURIComponent(text)}`;
  const audio = new Audio(audioSrc);
  // 监听错误方便排查
  audio.onerror = () => console.error('音频加载失败', audio.error);
  // 调用播放，捕获自动播放拦截的异常
  audio.play().catch(err => console.warn('播放被拦截，请通过点击等用户操作触发', err));
}

// 绑定点击事件触发，符合浏览器自动播放策略要求
document.getElementById('playBtn').addEventListener('click', () => {
  const text = document.getElementById('ttsInput').value.trim();
  if (text) tts(text);
});
</script>

Node.js服务端场景 #

Node.js本身没有原生Audio对象，且官方已经废弃request库，建议用原生能力搭配音频播放包实现：

1. 安装依赖

npm install axios play-sound

2. 实现代码

const axios = require('axios');
const player = require('play-sound')();
const fs = require('fs');
const path = require('path');

async function tts(text) {
  const audioSrc = `https://tts.cyzon.us/tts?text=${encodeURIComponent(text)}`;
  const tempSavePath = path.join(__dirname, 'temp_tts.mp3');
  
  // 下载音频流到本地临时文件
  const response = await axios.get(audioSrc, { responseType: 'stream' });
  const fileWriter = fs.createWriteStream(tempSavePath);
  response.data.pipe(fileWriter);
  
  await new Promise((resolve, reject) => {
    fileWriter.on('finish', resolve);
    fileWriter.on('error', reject);
  });

  // 播放音频，播放完成后删除临时文件
  player.play(tempSavePath, (playErr) => {
    if (playErr) console.error('播放失败', playErr);
    fs.unlinkSync(tempSavePath);
  });
}

// 调用示例
tts('测试文本转语音');

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