当前位置:主页 > 网页前端 > vue >

VUE 文字转语音播放的实现示例

时间:2023-02-10 10:12:13 | 栏目:vue | 点击:

一、技术:Web Speech API

Web Speech API?? 使您能够将语音数据合并到 Web 应用程序中。

Web Speech API 有两个部分:SpeechSynthesis 语音合成 (文本到语音 TTS)和 SpeechRecognition  语音识别(异步语音识别)。

二、语音合成及发音接口

? ?SpeechSynthesis??:语音合成服务的控制器接口,可用于获取设备上可用的合成语音,开始、暂停以及其它相关命令的信息。

? ?SpeechSynthesisUtterance??:表示一次发音请求。其中包含了将由语音服务朗读的内容,以及如何朗读它(例如:语种、音高、音量)。

三、vue项目案例

<template>
    <button @click="playVoice">播放语音</button>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
    return {};
  },
  methods: {
    playVoice() {
      this.handleSpeak('小朋友,你是否有很多问号') // 传入需要播放的文字
    },
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text;     // 文字内容: 小朋友,你是否有很多问号
      msg.lang = "zh-CN";  // 使用的语言:中文
      msg.volume = 1;      // 声音音量:1
      msg.rate = 1;        // 语速:1
      msg.pitch = 1;       // 音高:1
      synth.speak(msg);    // 播放
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    }
  }
};
</script>

您可能感兴趣的文章:

相关文章