js实现文字转语音

用到了H5新增的SpeechSynthesisUtterance，将指定文字合成为对应的语音

下面是常用的一些方法

• SpeechSynthesisUtterance.lang 获取并设置话语的语言
• SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
• SpeechSynthesisUtterance.volume 获取并设置说话的音量
• SpeechSynthesisUtterance.speak() 将对应的实例添加到语音队列中

• speechSynthesis.resume()  恢复播放语音

• speechSynthesis.pause()  暂停播放语音

• speechSynthesis.cancel()  删除队列中全部的语音，若是正在播放，则直接中止

还有一些方法跟属性，可网上自行查阅

我用vue3和elementuiPlus做了一个小案例，如图

下面是主要代码

<template>
  <main class="main">
    <div class="box">
      <el-input
        v-model="input"
        placeholder="请输入文字"
        @change="getUserInput"
      />
      <div>
        <span>语速选择</span>
        <el-slider
          v-model="value1"
          :min="0.1"
          :max="10"
          :step="0.1"
          show-stops
          @change="speakSpeedChoose"
        />
      </div>
      <div>
        <span>音量选择</span>
        <el-slider
          v-model="value2"
          :min="0"
          :max="1"
          :step="0.1"
          @change="voiceChoose"
        />
      </div>
      <div>
        <el-button type="success" round @click="playVoice">播放语音</el-button>
        <el-button type="success" round @click="stopVoice">暂停语音</el-button>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue'
// 输入框的值
const input = ref('')
// 语速选择 0.1-10
const value1 = ref(1)
// 音量选择 0-1
const value2 = ref(0.5)
// 声音的状态 true就是播放，false就是暂停
const voiedStatus = ref(false)

// 得到用户输入的值并赋值
const getUserInput = (val) => {
  input.value = val
}
// 语速选择
const speakSpeedChoose = (val) => {
  value1.value = val
}
// 音量选择
const voiceChoose = (val) => {
  value2.value = val
}
// 播放方法
const play = (status) => {
  // 判空
  if (!input.value) return
  // 创建实例，并传入输入的文字
  let readTxt = new SpeechSynthesisUtterance(input.value)
  readTxt.volume = value2.value // 音量
  readTxt.rate = value1.value // 语速
  speechSynthesis.speak(readTxt) // 调用说的方法
  if (status) {
    speechSynthesis.resume() // 恢复播放
  } else if (status === false) {
    speechSynthesis.pause() // 暂停播放
  }
  // 语言结束的回调
  readTxt.addEventListener('end', function () {
    window.speechSynthesis.cancel() // 删除队列中全部的语音
  })
}
// 点击播放
const playVoice = () => {
  voiedStatus.value = true
  play(true)
}
// 点击暂停
const stopVoice = () => {
  voiedStatus.value = false
  play(false)
}
</script>

样式

* {
  padding: 0;
  margin: 0;
}

html,
body,
.mian {
  width: 100%;
  height: 100%;
}

.box {
  width: 600px;
  height: 160px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #a0cfff;
}