使用js写一个播放语音提示的功能

Posted 2022-11-29 丰柏林

利用window自带的speechSynthesis编写一个播放语音提示的功能
之前利用百度的在线语音合成发现改不了其中的per属性，自己装了一下node包，发现cnpm引入的时候会与vue-admin-element里面的模块相冲突，导致项目崩掉。重新cnpm install之后项目跑起来了，于是开始使用window自带的编写。

<template>
  <button @click="playVoice">播放通知</button>
</template>
<script>
  const synth = window.speechSynthesis;
  const msg = new SpeechSynthesisUtterance();
  export default 
    data() 
      return ;
    ,
    methods: 
      playVoice() 
        this.handleSpeak('14号床需要取针！') // 传入需要播放的文字
      ,
      // 语音播报的函数
      handleSpeak(text) 
        msg.text = text;
        msg.lang = "zh-CN";  // 使用的语言:中文
        msg.volume = 1;      // 音量：1
        msg.rate = 2;        // 语速：1
        msg.pitch = 0;       // 音高：1
        synth.speak(msg);    // 播放
      ,
      // 语音停止
      handleStop(e) 
        msg.text = e;
        msg.lang = "zh-CN";
        synth.cancel(msg);
      
    
  ;
</script>