实现语音合成的三种方法:HTML5 Web Speech 、speak-tts、百度语音合成

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 = ref<SpeechSynthesisVoice[]>([]);
//语音播报
const speakVoice = (msg:any) => {
  window.speechSynthesis.cancel();
  try {
      initVoices().then(()=>{
          //实例化播报内容
          var instance = new SpeechSynthesisUtterance(); 
          instance.text = msg; // 文字内容: 测试内容
          instance.lang = "zh-CN"; // 使用的语言:中文
          instance.volume = 1; // 声音音量:1
          instance.rate = 1.5; // 语速:1
          instance.pitch = 1; // 音高:1
          //instance.voice = null; // 某人的声音
          //let voices = window.speechSynthesis.getVoices();
          instance.voice = voices.value.filter(function (voice) {
               return voice.localService == true && voice.lang == 'zh-CN'
          })[0]
          // instance.voice = window.speechSynthesis.getVoices()[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();

   // 监听语音变化 Chrome允许使用远程服务器进行语音合成,而SpeechSynthesis向谷歌服务器请求语音列表。要解决此问题,您需要等待语音将被加载,然后再次请求它们。
   speechSynthesis.onvoiceschanged = () => {
     voices.value = window.speechSynthesis.getVoices();
   };

   // 等待语音列表加载完成
   await new Promise<void>((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浏览器,需要额外的兼容处理。
  • 语音包限制:语音包的选择和质量可能受到浏览器和操作系统的限制。

实现语音合成的三种方法:HTML5 Web Speech 、speak-tts、百度语音合成_第1张图片

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






解释
  1. 模板部分:包含一个文本域用于输入要转换的文字,和一个按钮来触发语音播放。

  2. 设置部分

    • 使用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项目中,你可能需要使用axiosfetch来发送HTTP请求。这里我们使用axios作为示例。首先,你需要安装axios

npm install axios
# 或者
yarn add axios

步骤 3: 创建Vue 3组件

在你的Vue 3项目中,创建一个新的组件用于处理语音合成的逻辑。

组件模板


组件脚本

你可能感兴趣的:(Vue3,TypeScript,前端,html5,百度,语音识别,语音合成,speech)