语音播报功能

前端项目中实现语音播报：调用 window.speechSynthesis.speak()用于实现语音合成功能，将文本转换为语音并播放。以下是其基本使用方法

基本使用步骤

• 创建语音合成实例：使用SpeechSynthesisUtterance构造函数创建一个语音合成实例，并传入要转换为语音的文本内容。例如：

const msg = new SpeechSynthesisUtterance('你有新的不吃香菜添加好友，请查收');
msg.lang = 'zh-CN'; // 设置语言为中文
msg.rate = 0.8; // 语速，0.1-10，默认为1
msg.volume = 1; // 音量，0-1，默认为1
msg.pitch = 1; // 音调，0-2，默认为1

• 调用语音合成：将创建并设置好参数的语音合成实例作为参数传递给window.speechSynthesis.speak()方法，即可触发语音合成并播放。例如：

  window.speechSynthesis.speak(msg);

 实例：

<template>
  <div>
    <button @click="speakText">播报消息</button>
  </div>
</template>
<script>
export default {
  methods: {
    speakText() {
      const msg = new SpeechSynthesisUtterance('不吃香菜已经到账，请验收');
      window.speechSynthesis.speak(msg);
    }
  }
};
</script>

注意事项

• 浏览器兼容性：虽然大多数现代浏览器都支持Web Speech API，但在开发时最好检查目标浏览器的兼容性。
• 用户交互限制：在某些浏览器中，出于安全考虑，语音播报可能需要用户交互（如点击按钮）才能触发，无法在后台自动播放。
• 语音资源加载：在使用语音合成功能前，确保浏览器已经加载了相应的语音资源，否则可能无法正常播放语音。

如遇到浏览器兼容问题，也可以用三方插实现：三方插件后续补充

speak-tts插件

1. 安装与使用： 首先，通过npm install speak-tts安装插件。
2. 在页面中引入：import Speech from 'speak-tts'。
3. 初始化：在mounted钩子函数中调用this.speechInit()方法，在该方法中创建Speech实例，设置语言（如this.speech.setLanguage('zh-CN')），并调用init方法进行初始化。
4. 语音播报：定义speak方法，在其中调用this.speech.speak({text: "语音播报测试"})进行语音播报。