共计 5168 个字符，预计需要花费 13 分钟才能阅读完成。
1. 使用 HTML5 Web Speech API
1.1 使用方法
window.speechSynthesis 是 HTML5 Web Speech API 的一部分，是浏览器原生提供的文本转语音功能。它允许开发者在网页上通过 JavaScript 调用，将文本转换为语音进行播放。
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API
示例代码：
template>
div>
button @click="speakVoice(' 测试语音播放 ')">播放语音/button>
/div>
/template>
script setup lang="ts">
const voices = refSpeechSynthesisVoice[]>([]);
const speakVoice = (msg:any) => {
window.speechSynthesis.cancel();
try {
initVoices().then(()=>{
var instance = new SpeechSynthesisUtterance();
instance.text = msg;
instance.lang = "zh-CN";
instance.volume = 1;
instance.rate = 1.5;
instance.pitch = 1;
instance.voice = voices.value.filter(function (voice) {
return voice.localService == true && voice.lang == 'zh-CN'
})[0]
instance.addEventListener("end", () => {});
console.log(instance)
window.speechSynthesis.speak(instance)
})
} catch (error) {
console.log(error)
}
}
async function initVoices() {
if (!window.speechSynthesis) {
console.error('Speech synthesis is not supported in this browser.');
return;
}
voices.value = window.speechSynthesis.getVoices();
speechSynthesis.onvoiceschanged = () => {
voices.value = window.speechSynthesis.getVoices();
};
await new Promisevoid>((resolve) => {
if (voices.value.length > 0) {
resolve();
} else {
const intervalId = setInterval(() => {
const newVoices = window.speechSynthesis.getVoices();
if (newVoices.length > 0) {
voices.value = newVoices;
clearInterval(intervalId);
resolve();
}
}, 1000);
}
});
}
const beQuiet = () => {
console.log('语音播报停止')
window.speechSynthesis.cancel();
}
onMounted(()=>{
initVoices();
})
/script>
1.2 优缺点
优点：
- 原生支持：无需安装任何外部库或插件，主流现代浏览器均支持。
- 功能丰富：支持多种语言和音频设置，可以自定义语音风格、发音调整、语速、音量等。
- 应用广泛：适用于网站辅助阅读、语音导航、语音消息提示等多种场景。
缺点：
- 浏览器兼容性：不完全兼容 IE 浏览器，需要额外的兼容处理。
- 语音包限制：语音包的选择和质量可能受到浏览器和操作系统的限制。
2. 使用speak-tts
speak-tts是一个基于浏览器SpeechSynthesis API 的封装库，它提供了更加丰富的功能和更好的兼容性处理。
2.1 使用方法
步骤 1: 安装speak-tts
首先，你需要在你的 Vue 3 项目中安装speak-tts。在你的项目根目录下，通过 npm 或 yarn 来安装：
npm install speak-tts
yarn add speak-tts
步骤 2: 在 Vue 组件中引入speak-tts
然后，在你的 Vue 组件中引入 speak-tts 并使用它。以下是一个 Vue 3 组件的示例，展示了如何设置并使用speak-tts。
解释
-
模板部分：包含一个文本域用于输入要转换的文字，和一个按钮来触发语音播放。
-
设置部分：
- 使用
ref来响应式地存储文本和SpeakTTS实例。 initSpeech函数用于初始化SpeakTTS实例，设置默认的音量、语言、语速和音调等。speakText函数用于播放文本。如果SpeakTTS实例未初始化，则先调用initSpeech。然后使用speak方法播放文本，并附加了一些监听器来处理开始、结束和错误事件。
- 使用
3. 使用百度语音合成 API
百度语音合成（Text-to-Speech, TTS）是一项强大的服务，它能够将文本转换成流畅的语音输出。
3.1 使用方法
步骤 1: 注册百度 AI 开放平台账号并获取 API Key
首先，你需要在百度 AI 开放平台注册一个账号，并创建应用以获取 API Key 和 Secret Key。这些密钥将用于认证你的请求，从而使用百度语音合成服务。
步骤 2: 安装必要的库
在 Vue 3 项目中，你可能需要使用 axios 或fetch来发送 HTTP 请求。这里我们使用 axios 作为示例。首先，你需要安装axios：
npm install axios
yarn add axios
步骤 3: 创建 Vue 3 组件
在你的 Vue 3 项目中，创建一个新的组件用于处理语音合成的逻辑。
组件模板
组件脚本
在 标签中，使用 TypeScript 定义组件的逻辑。
script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios';
export default defineComponent({
setup() {
const textToSynthesize = ref('');
const audioElement = refHTMLAudioElement | null>(null);
const synthesizeText = async () => {
if (!textToSynthesize.value.trim()) {
alert('Please enter some text to synthesize.');
return;
}
try {
const accessToken = 'YOUR_ACCESS_TOKEN';
const baseUrl = 'https://aip.baidubce.com/oauth/2.0/token';
const ttsUrl = 'https://aip.baidubce.com/rest/2.0/tts/v1/text_to_speech';
const params = {
text: textToSynthesize.value,
lan: 'zh',
spd: 5,
pit: 5,
vol: 5,
per: 4,
cue_text: '',
aue: 'mp3',
token: accessToken,
};
const response = await axios.post(ttsUrl, params, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
paramsSerializer: params => {
return Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join('&');
},
responseType: 'blob',
});
const url = URL.createObjectURL(new Blob([response.data]));
if (audioElement.value) {
audioElement.value.src = url;
audioElement.value.play();
}
} catch (error) {
console.error('Error during synthesizing text:', error);
alert('Failed to synthesize text.');
}
};
return { textToSynthesize, audioElement, synthesizeText };
},
});
/script>
注意 ：上述代码示例中，YOUR_ACCESS_TOKEN 应替换为你从百度 AI 开放平台获取的实际 API Key。在实际应用中，你还需要处理 token 的获取和刷新逻辑，因为 token 有一定的有效期。
3.2 优缺点
优点：
- 专业性强：百度语音合成 API 基于百度强大的语音识别和语音合成技术，提供了高质量的语音合成服务。其音色自然、语速可调、发音准确，适用于多种场景。
- 丰富的功能：百度语音合成 API 支持多种语言、音色选择、语速调节等功能，可以满足不同用户的需求。同时，它还提供了 API 接口和 SDK 等多种接入方式，方便开发者集成和使用。
- 稳定性高：作为专业的语音合成服务，百度语音合成 API 具有较高的稳定性和可靠性。它可以在高并发、大流量的场景下保持稳定的性能表现。
- 文档和支持完善：百度为开发者提供了详细的 API 文档和技术支持，帮助开发者快速上手并解决问题。
缺点：
- 依赖外部服务：使用百度语音合成 API 需要依赖百度的服务器进行语音合成处理。这可能导致在网络状况不佳或百度服务器出现故障时无法使用或功能受限。
- 成本考虑：虽然百度语音合成 API 提供了免费试用和付费服务两种模式，但对于需要高频次、大量使用的场景来说，成本可能会成为一个考虑因素。
- 集成复杂度：与 Web Speech API 相比，集成百度语音合成 API 可能需要更多的配置和代码编写工作。这可能会增加开发者的工作量和时间成本。
综上所述，HTML5 Web Speech API 和百度语音合成 API 在实现语音合成方面各有其优缺点。在选择时需要根据自己的具体需求和场景来综合考虑。如果需要快速、简便地实现基本的语音合成功能，并且不特别关注语音质量和音色选择等方面的问题，那么可以选择 HTML5 Web Speech API；如果需要更高质量的语音合成服务、丰富的功能选项以及更好的稳定性和可靠性，那么可以考虑使用百度语音合成 API。
原文地址: 实现语音合成的三种方法：HTML5 Web Speech、speak-tts、百度语音合成
