frontend/src/components/VoiceTest.vue

<style lang="scss" scoped>
.home-page{
}
</style>
<template>
<div class="home-page">
  <el-input type="textarea" autosize placeholder="请输入内容" v-model="voiceSet.text"></el-input>
  <label>语速：</label><el-input-number v-model="voiceSet.rate" :precision="1" :step="0.1" :max="10"></el-input-number>
  &nbsp;&nbsp;&nbsp;
  <label>音高：</label><el-input-number v-model="voiceSet.pitch" :step="0.1" :min="0" :max="2"></el-input-number>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <el-button type="primary" @click="voicePlay">开 始</el-button>
  &nbsp;&nbsp;&nbsp;
  <el-button type="primary" @click="voicePause">暂 停</el-button>
  &nbsp;&nbsp;&nbsp;
  <el-button type="primary" @click="voiceResume">继 续</el-button>
  &nbsp;&nbsp;&nbsp;
  <el-button type="primary" @click="voiceCancel">取 消</el-button>
</div>
</template>

<script>
export default {
  name: 'VoiceTest',
  components: {
  },
  data () {
      return {
        voiceSet: {
          text: 'The first step is one of awareness. It will be hard to make a change to positive thinking without being acutely intimate with the thoughts that run through your mind. Recently, I was amazed to discover deep buried emotions from negative thoughts that I had for fewer than 10 minutes. Without awareness, I would have carried the hurt and anger inside. Awareness helped me to bring them out to the open for me to deal with.',
          rate: 0.5,
          pitch: 1
        },
        msg: new SpeechSynthesisUtterance(),  //构建语音合成实例
        syn: window.speechSynthesis
      }
  },
  created() {
  },
  methods: {
    voicePlay() {
      this.msg.text = this.voiceSet.text;
      this.msg.lang = 'en';
      this.msg.volume = '1';
      this.msg.rate = this.voiceSet.rate;
      this.msg.pitch = this.voiceSet.pitch;
      this.syn.speak(this.msg);
      // console.log(speechSynthesis.getVoices());   //返回浏览器支持的语音包列表数组
    },
    voicePause(){
      this.syn.pause()
    },
    voiceResume(){
      this.syn.resume()
    },
    voiceCancel(){
        this.syn.cancel()
    },
  }
}
</script>