基于JS实现文字转语音即文本朗读

let utterThis = new SpeechSynthesisUtterance('书以启智,技于谋生,活出斜杠');
speechSynthesis.speak(utterThis);

let utterThis = new SpeechSynthesisUtterance();
utterThis.text = '书以启智,技于谋生,活出斜杠';
utterThis.lang = 'en-US';//汉语
utterThis.rate = 0.7;//语速
speechSynthesis.speak(utterThis);

<template>
    <div class="speech-wrap">
       <div>
            <span class="demonstration">音量</span>
            <el-slider @input="handleVoinceInput" v-model="voinceValue"  vertical height="200px"></el-slider>
       </div>
       <div>
             <el-input class="inseret-input" clearable placeholder="请输入内容" v-model="input"></el-input>
             <el-select @change="handleSelectChange" v-model="selectVal" slot="prepend" placeholder="请选择语言">
                 <el-option label="zh-CN" value="zh-CN"></el-option>
                 <el-option label="en-US" value="en-US"></el-option>
            </el-select>
            <el-button slot="append" @click="handleTransYuYin">转语音</el-button>
            <el-button  @click="handleStopYuYin">暂停</el-button>
            <el-button  @click="handleHuiFuYuYin">恢复</el-button>
       </div>  
    </div>
 </template>
 <script>
 export default {
     name: 'speechSynthesisUtterance',
     data() {
         return {
             input: '书以启智,技于谋生,活出斜杠',
             voinceValue: 30,
             selectVal: 'zh-CN',
         }
     },
 
     methods: {
         handleTransYuYin() {
            if(this.input) {
                let msg = new SpeechSynthesisUtterance(this.input);
                msg.volume = this.voinceValue;
                msg.rate = this.voinceValue;
                msg.pitch = this.voinceValue;
                this.throttle(window.speechSynthesis.speak(msg),2000);
            }else {
                this.$message.error('输入框内容不能为空');
            }
           
         },

 
         handleVoinceInput(val) {
             this.voinceValue = val;
         },
 
          handleSelectChange(val) {
             this.selectVal = val;
          },
 
          handleStopYuYin() {
              window.speechSynthesis.pause();
          },

          handleHuiFuYuYin() {
            window.speechSynthesis.resume();
          },
 
          throttle(fn,delay) {
             let last = 0
             return function() {
                 const now = new Date()
                 if(now - last > delay) {
                     fn.apply(this,arguments)
                     last = now
                 }
             }
         }  
         
     }
 }
 </script>
 <style scoped>
 .speech-wrap {
    display:flex;
    justify-content:start;
    align-items: center;
    
 }

 .speech-wrap .inseret-input {
    width: 400px;
 }
 </style>