VUE 文字转语音播放的实现示例

2024-08-10 03:16:12

一、技术：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 文字转语音内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue项目或网页上实现文字转换成语音播放功能

一.在网页上实现文字转换成语音方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为可以听得懂的.流利的口语输出的技术. 1. 使用百度的接口: http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字 2.参数说明: lan=zh:语言是中文,如果改为lan=en,则语言是英文. ie=UTF-8:文字格式. spd=2:语速,可以是1-9的数字,数
VUE 文字转语音播放的实现示例

目录一.技术:Web Speech API 二.语音合成及发音接口三.vue项目案例一.技术:Web Speech API Web Speech API使您能够将语音数据合并到 Web 应用程序中. Web Speech API 有两个部分:SpeechSynthesis 语音合成 (文本到语音 TTS)和 SpeechRecognition 语音识别(异步语音识别). 二.语音合成及发音接口 SpeechSynthesis:语音合成服务的控制器接口,可用于获取设备上可用的
Vue3+TS实现语音播放组件的示例代码

目录第一步:点击拖拽进度条第二步:操作媒体音频第三步:进度条和播放进度关联完整代码该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js.react.vue2等都可以轻松实现所涉及到重要点有以下几个: (1)进度条的实现:拖拽进度条.点击进度条 (2)操作audio语音播放:通过js操作audio媒体 (3)播放进度与进度条紧密关联:播放的进度改变时,进度条也随之改变:进度条改变时,播放的进度也随之改变效果图: 开始我们的设计吧
vue调用语音播放的方法

本文实例为大家分享了vue调用语音播放的具体代码,供大家参考,具体内容如下功能展示输入文字点击播放调用语音直接上代码 <template> <div>  <div> <input type="text" id="ttsText"> <input type="button" id="tts_btn" @click="
vue实现文字转语音功能详解

目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例首先new一个SpeechSynthesisUtterance对象使用实例对象的一些属性,包括: text – 要合成的文字内容,字符串.lang – 使用的语言,字符串, 例如:"zh-cn"voiceURI – 指定希望使用的声音和服务,字符串.volume – 声音的音量,区间范围是0到1,默认是1.rate – 语速,数值,默认值是1,范围是0.1到1
vue一个页面实现音乐播放器的示例

本文介绍了vue一个页面实现音乐播放器的示例,分享给大家,具体如下: 效果如下: 项目地址:https://github.com/ermu592275254/MiniMusicPlayer 演示地址: https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思界面做音乐播放器,界面一定要炫酷.太low了听歌没感觉.本身是为了在上班的时候用,于是做成了一个类似网易云音乐的界面,大小合适.不用兼容手机端. 用css做图标本怀着
Vue实现鼠标经过文字显示悬浮框效果的示例代码

需求在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失. 分析涉及到鼠标的移动事件. 鼠标事件有下面这几种: 1.onclick(鼠标点击事件) box.onclick = function(e){ console.log(e) } 2.onmousedown(鼠标按下事件) box.onmousedown = fun
Vue实现悬浮框自由移动+录音功能的示例代码

目录效果如下主要功能实现 1.封装第一个漂浮组件FloatBall.vue 2.封装第二个组件录音组件Audio.vue 3.recorder.js 效果如下主要功能 1.一个漂浮的球,在全屏幕中自由移动遇到边边角角自动改变方向 ,自带动画效果 2.录音功能,可以录制用户的声音,可以下载为任意格式的音频文件到本地,也可以通过二进制流发给后端由于后端要声音文件格式wav或者pcm,采样率16000,所以我改了配置文件,稍后我会介绍在哪里改,改什么什么样都是可以的. 注:代码我已经封装成组
易语言调用百度语音平台实现文字转换语音功能的代码

调用百度语音平台实现文字转换语音功能此功能需要加载精易模块5.6 .版本 2 .支持库 wmp9 .程序集窗口程序集1 .子程序 _试听按钮_被单击播放器1.地址＝ "http://tts.baidu.com/text2audio?lan=zh&pid=101&ie=UTF-8&text=" + 编码_URL编码 (内容编辑框.内容, , 真) + "&spd=5&per=4" ' 参数可需描述 ' tex 必填
java文字转语音播报功能的实现方法

前言本文主要给大家分享了关于java文字转语音播报的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下一.pom.xml引入jar包依赖  <dependency> <groupId>com.hynnet</groupId> <artifactId>jacob</artifac
使用Python实现文字转语音并生成wav文件的例子

目前手边的一些工作,需要实现声音播放功能,而且仅支持wav声音格式. 现在,一些网站上支持文字转语音功能,但是生成的都是MP3文件,这样还需要额外的软件来转成wav文件,十分麻烦. 后来,研究Python,发现Python可以很容易的实现上面的功能. 步骤如下, 1.使用百度语音实现TTS(Text To Speech),生成mp3文件; 2. 使用pydub和ffmpeg实现mp3转wav格式. 下面,先上简单的示例代码,然后对代码作简单的分析. #!/usr/bin/python -tt #

VUE 文字转语音播放的实现示例

目录

一、技术：Web Speech API

二、语音合成及发音接口

三、vue项目案例

相关推荐

随机推荐