SpeechSynthesisUtterance基本介绍

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等

SpeechSynthesisUtterance基本属性

  • SpeechSynthesisUtterance.lang 获取并设置话语的语言
  • SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
  • SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
  • SpeechSynthesisUtterance.text 获取并设置说话时的文本
  • SpeechSynthesisUtterance.voice 获取并设置说话的声音
  • SpeechSynthesisUtterance.volume 获取并设置说话的音量

SpeechSynthesisUtterance.text基本方法

  • speak() 将对应的实例添加到语音队列中
  • cancel() 删除队列中所有的语音.如果正在播放,则直接停止
  • pause() 暂停语音
  • resume() 恢复暂停的语音
  • getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

项目实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字转语音</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    #app {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      height: 800px;
    }
    .content {
      display: flex;
      flex-direction: row;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-input
      placeholder="请输入内容"
      v-model="message"
      clearable
      style="margin-bottom: 8px;width: 250px;">
    </el-input>
    <el-button style="font-size: 24px" type="primary" icon="el-icon-microphone" circle @click="read"></el-button>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      methods: {
        read(){
          var msg = new SpeechSynthesisUtterance(this.message)
          console.log("开始播放")
          msg.volume = 2  //音量
          msg.rate = 0.8  //语速
          msg.pitch = 1   //语调
          window.speechSynthesis.speak(msg)
        }
      }
    })
  </script>
</body>
</html>

项目优化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字转语音</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    #app {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      height: 800px;
    }
    .content {
      display: flex;
      flex-direction: row;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-input
      placeholder="请输入内容"
      v-model="message"
      clearable
      style="margin-bottom: 8px;width: 250px;">
    </el-input>
    <el-row>
      <el-button style="font-size: 18px" type="primary" @click="read" :disabled="start">加入播放队列</el-button>
      <el-button v-show="show === 1" style="font-size: 24px" type="primary" icon="el-icon-video-pause" :disabled="suspend" circle @click="pause"></el-button>
      <el-button v-show="show === 2" style="font-size: 24px" type="primary" icon="el-icon-video-play" circle @click="play"></el-button>
    </el-row>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: '',
        show: 1,
        start: false,
        suspend: true
      },
      methods: {
        read(){
          if(this.message){
            that = this
            this.start = true
            this.suspend = false
            var msg = new SpeechSynthesisUtterance(this.message)
            console.log("开始播放")
            msg.volume = 2  //音量
            msg.rate = 0.8  //语速
            msg.pitch = 1   //语调
            msg.onend = function() {
              that.start = false
              that.suspend = true
            }
            window.speechSynthesis.speak(msg)
          }else{
            this.$message.warning('文本不能为空')
          }
        },
        pause(){
          this.show = 2
          var msg = new SpeechSynthesisUtterance(this.message)
          window.speechSynthesis.pause(msg)
        },
        play(){
          this.show = 1
          var msg = new SpeechSynthesisUtterance(this.message)
          window.speechSynthesis.resume(msg)
        }
      }
    })
  </script>
</body>
</html>
文章目录