vue实现文字转语音的组件，class类封装，实现项目介绍文字播放，不需安装任何包和插件（2024-04-17）

1、项目界面截图

2、封装class类方法（实例化调用）

javascript 复制代码

// 语音播报的函数
export default class SpeakVoice {
  constructor(vm, config) {
    let that = this
    that._vm = vm
    that.config = {
      text: '春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明！',
      volume: 1, // 声音音量：1，范围从0到1
      rate: 1,   // 设置语速：1，范围从0到100
      labelData:{
        name:''
      },
      ...config
    }
    that.synth = window.speechSynthesis // 启用文本
    that.instance = new SpeechSynthesisUtterance()
    that.instance.lang = "zh-CN"; // 使用的语言:中文
    that.status = '初始化'
    that.isload = false;
    that.initVoice();
  }
  // 初始化
  initVoice(){
    let that = this
    if(that.isload){
      return false
    }else{
      that.isload = true
      that.instance.text = that.config.text; // 文字内容: 测试内容
      that.instance.volume = that.config.volume;
      that.instance.rate = that.config.rate;

      that.instance.onstart = e => {
        that.status = '开始播放'
      }
      that.instance.onend = e => {
        that.status = '结束播放'
      }
      that.instance.onpause = e => {
        this.status = "暂停播放"
      }

    }
    /*let speech = that.getSpeechVoices();
    speech.then((voices) => {
      voices = voices.filter(item => (item.lang.indexOf('zh-') > -1 && item.localService));
      if (voices.length === 0) {
        console.error('没有可用的中文语音!');  //中文包可以调试多种语言包切换
      }else {
        //实例化播报内容
        that.instance.lang = "zh-CN"; // 使用的语言:中文
        that.instance.text = '测试内容'; // 文字内容: 测试内容
        that.instance.volume = 1
        that.instance.rate = 1
        that.instance.voice = voices[0]
        that.synth.speak(that.instance); // 播放
      }
    });*/
  }
  // 语音开始
  handleSpeak() {
    this.synth.speak(this.instance); // 播放
  }
  // 语音队列重播
  handleReply() {
    this.handleCancel();
    this.handleSpeak()
  }
  // 语音队列删除 , 删除队列中所有的语音.如果正在播放,则直接停止
  handleCancel() {
    this.synth.cancel(this.instance);
  }
  // 语音暂停, 暂停语音该次语音播放
  handleStop() {
    this.synth.pause(this.instance);
  }
  // 恢复暂停的语音
  handleResume(){
    this.synth.resume(this.instance) //恢复暂停的语音
  }



  //获取语言包数据, 这个接口需要一点时间，改成异步的
  getSpeechVoices() {
    let that = this
    return new Promise(function (resolve, reject) {
        let id;
        id = setInterval(() => {
          if (that.synth.getVoices().length !== 0) {
            resolve(that.synth.getVoices());
            clearInterval(id);
          }
        }, 10);
      }
    )
  }

  destory () {
    this.handleCancel()
  }
}

// 语音删除重播
export function handleReturnStop(e,callBack) {
  const synth = window.speechSynthesis; // 启用文本
  const msg = new SpeechSynthesisUtterance(); // 表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种
  msg.text = e;
  msg.lang = "zh-CN";
  synth.cancel(msg); // 删除队列中所有的语音.如果正在播放,则直接停止
  debugger
  callBack && callBack()
}

// 语音停止
export function handleStop(e) {
  const synth = window.speechSynthesis; // 启用文本
  const msg = new SpeechSynthesisUtterance(); // 表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种
  msg.text = e;
  msg.lang = "zh-CN";
  synth.pause(msg); // 暂停语音该次语音播放
}

//这个接口获取数据需要一点时间，改成异步的
export function setSpeech() {
  return new Promise(
    function (resolve, reject) {
      let synth = window.speechSynthesis;
      let id;
      id = setInterval(() => {
        if (synth.getVoices().length !== 0) {
          resolve(synth.getVoices());
          clearInterval(id);
        }
      }, 10);
    }
  )
}

3、实例化父组件

javascript 复制代码

<i title="播放" class="el-icon-microphone" @click="actMicroFun"></i>


import SpeakVoice from './speak-voice.js'


actMicroFun () {
  let speakVoice = new SpeakVoice();
  speakVoice.handleReply();
}

4、关于语音api解析

javascript 复制代码

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


函数设置
speechSynthesis.speak() 将对应的实例添加到语音队列中
speechSynthesis.cancel() 删除队列中所有的语音.如果正在播放,则直接停止
speechSynthesis.pause() 暂停语音
speechSynthesis.resume() 恢复暂停的语音
speechSynthesis.getVoices() 获取支持的语言数组.