VUE 文字转语音播放的实现示例
更新时间：2022年02月17日 15:16:15 作者：laiwenhuajava
本文主要介绍了VUE 文字转语音播放的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一、技术：Web Speech API
Web Speech API 使您能够将语音数据合并到 Web 应用程序中。
Web Speech API 有两个部分：SpeechSynthesis 语音合成 （文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。
二、语音合成及发音接口
SpeechSynthesis：语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其它相关命令的信息。
SpeechSynthesisUtterance：表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。
三、vue项目案例
<template>
<button @click="playVoice">播放语音</button>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
data() {
return {};
},
methods: {
playVoice() {
this.handleSpeak('小朋友，你是否有很多问号') // 传入需要播放的文字
},
// 语音播报的函数
handleSpeak(text) {
msg.text = text; // 文字内容: 小朋友，你是否有很多问号
msg.lang = "zh-CN"; // 使用的语言:中文
msg.volume = 1; // 声音音量：1
msg.rate = 1; // 语速：1
msg.pitch = 1; // 音高：1
synth.speak(msg); // 播放
},
// 语音停止
handleStop(e) {
msg.text = e;
msg.lang = "zh-CN";
synth.cancel(msg);
}
}
};
</script>到此这篇关于VUE 文字转语音播放的实现示例的文章就介绍到这了,更多相关VUE 文字转语音内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3如何解决slot深层透传问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
条件渲染是根据条件的真假来有条件地渲染元素,在Vue.js 3.x中,常见的条件渲染包括使用v-if指令和v-show指令,本文讲解使用v-if指令进行条件渲染,需要的朋友可以参考下2024-03-03
这篇文章主要给大家介绍了关于vue自定义表格列的相关资料,表格组件在开发中经常会用到,文章通过示例代码介绍的也很详细,需要的朋友可以参考下2021-06-06
Vue 最独特的特性之一,是其非侵入性的响应式系统。下面这篇文章主要给大家介绍了关于vue响应式原理与双向数据的相关资料,需要的朋友可以参考下2021-06-06
本篇文章主要介绍了利用VUE框架，实现列表分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-01-01
sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue 组件注册的相关资料，帮助大家更好的理解和学习vue 组件的相关知识，感兴趣的朋友可以了解下2020-11-11
这篇文章主要为大家详细介绍了vue实现整屏滚动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue阻止页面回退的实现方法(浏览器适用)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论