(vue)Vue project realizes voice broadcast

(vue)Vue project realizes voice broadcast

---

Solve reference 1:

In a Vue project, you can use the SpeechSynthesis interface in the Web Speech API to implement automatic reading of text content. Here is an example:

1. Add a button to the template of the Vue component to trigger reading:

<template>
  <div>
    <button @click="startTextToSpeech">开始朗读</button>
  </div>
</template>

2. Implement the reading function in the method of the Vue component:

<script>
export default {
    
    
  methods: {
    
    
    startTextToSpeech() {
    
    
      const speech = new SpeechSynthesisUtterance();
      const text = "你要朗读的文本"; // 替换为你要朗读的文本内容
      speech.text = text;

      window.speechSynthesis.speak(speech);
    },
  },
};
</script>

---

Study Reference 2: https://www.yzktw.com.cn/post/1266165.html