vue实现文字转语音功能详解

目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例

首先new一个SpeechSynthesisUtterance对象

使用实例对象的一些属性，包括：

text – 要合成的文字内容，字符串。
lang – 使用的语言，字符串， 例如："zh-cn"
voiceURI – 指定希望使用的声音和服务，字符串。
volume – 声音的音量，区间范围是0到1，默认是1。
rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。

方法

speak() 将对应的实例添加到语音队列中
cancel() 删除队列中所有的语音.如果正在播放,则直接停止
pause() 暂停语音
resume() 恢复暂停的语音
getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

但是这个方法不支持老版的ie,需要加浏览器判断方法

isIe(){
    if(!!window.ActiveXObject || "ActiveXObject " in window){
        return true
    }else{
        return false
    }
},

然后根据ie使用方法

   voice(e){
    window.speechSynthesis.cancel()
      let timer
      timer = setInterval(() => {
        let msg = e
        if(this.isIe()){
            let voiceObj = new ActiveXObject("Sapi.SpVoice")
            voiceObj.Rate = -1 // 语速
            voiceObj.Volume = 50 // 音量
            voiceObj.Speak(msg,1)
        }else{
            let speakMsg = new 
               SpeechSynthesisUtterance(msg)
            speakMsg.rate = 1 // 语速
            speakMsg.pitch = 3 // 音量
            window.speechSynthesis.speak(speakMsg)
        }
     }, 1000)
     setTimeout(() => {
        // 一段时间后清除定时器
        clearInterval(timer)
     }, 1000)
    },

到此这篇关于vue实现文字转语音功能详解的文章就介绍到这了,更多相关vue语音播报内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中添加语音播报功能的实现

    vue中添加语音播报功能的实现

    1:首先把我们的静态资源文件加入到前端工程项目当中 我这里mp3文件就是要播报的语言文件 2: 页面中加入标签 <!-- src 后面的链接是我保存在static文件下的一段报警声 --> <audio v-show="false" id="audioSuccessIn" src="/static/successIn.mp3"/> <audio v-show="false" id="au

  • vue实现百度语音合成的实例讲解

    这里我完全依照百度提供的语音合成api来做:https://ai.baidu.com/docs#/TTS-Online-Node-SDK/top 直接去看node.js SDK. 1.换取access_token: 参考:https://ai.baidu.com/docs#/TTS-API/top,在这里用浏览器换取token 2.下载sdk依赖: npm install baidu-aip-sdk 完整代码(非原创,参考了一个demo,但是很久以前写的找不到了): btts(text) { c

  • vue调用语音播放的方法

    vue调用语音播放的方法

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

  • Vue3+TS实现语音播放组件的示例代码

    Vue3+TS实现语音播放组件的示例代码

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

  • 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​​:语音合成服务的控制器接口,可用于获取设备上可用的

  • vue实现文字转语音功能详解

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

  • python 利用pyttsx3文字转语音过程详解

    这篇文章主要介绍了python 利用pyttsx3文字转语音过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 # -*- coding: utf-8 -*- import pyttsx3 engine = pyttsx3.init() with open("all.txt",'r',encoding='utf-8') as f: while 1: line = f.readline() print(line, end = '')

  • Vue.js实现的购物车功能详解

    Vue.js实现的购物车功能详解

    本文实例讲述了Vue.js实现的购物车功能.分享给大家供大家参考,具体如下: 使用计算属性,内置指令,方法等基础知识开发购物车. 需求分析:展示一个已经加入购物车的商品列表,包含商品名称.商品单价.购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除.效果如图所示: --实例来自<Vue.js实战>第五章 逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleR

  • vue如何调用浏览器分享功能详解

    vue如何调用浏览器分享功能详解

    前言 「Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.官方描述的它还是一个渐进式框架,本文主要介绍了关于vue调用浏览器分享的相关资料,下面话不多说了,来一起看看详细的介绍吧 步骤如下: 1.开发环境 vue+vant 2.电脑系统 windows10专业版 3.在使用vue开发的过程中,我们经常会遇到分享,下面我来分享一下我的方法,希望对你有所帮助. 4.先看效果图: 5.使用NativeShare.js 来达到上述功能的实现 // 安装 npm ins

  • Vue实现淘宝购物车三级选中功能详解

    Vue实现淘宝购物车三级选中功能详解

    最近在练习商城项目,记录下实现购物车三级选中的过程(小白一个,水平很菜) 效果图: 实现: 1.全选时所有商品+店铺全部选中:反之全部取消选中 2.店铺选中时,当前店铺内所有商品选中:反之取消选中 3.店铺内商品全选 → 所属店铺选中:反之取消选中店铺 4.店铺+所有商品全选 → 全选按钮选中:反之取消选中 首先说明一下,我使用了vuex来管理购物车数据,所有改变按钮状态的方法都写在mutaition里 const state = { cartList: [], // 购物车列表 totalCo

  • vue 实现网页截图功能详解

    vue 实现网页截图功能详解

    最近项目有一个需求,需要上传图片,但是客户上传的图片大小不一,所以我们需要规定客户的图片比例,但又需要是客户所需的,所以就想到了截图 实现效果 我们的架构是vue,所以用的是一个vue的截图插件 安装插件:npm install vue-cropper --save-dev 引入组件 import Vue from 'vue'; import { VueCropper } from "vue-cropper"; Vue.use(VueCropper) 核心代码 <div>

  • 代号为Naruto的Vue 2.7正式发布功能详解

    目录 引言 向后移植的功能 注意事项 与 Vue 3 的行为差异 升级指南 Vue CLI / webpack Vite Volar 兼容性 Devtools 支持 2.7 版本的影响 额外细节 引言 Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者. 尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性.浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2.在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户

  • Vue Electron实现输入法自动刷字数功能详解

    目录 安装依赖 Vue代码 Electron 代码 总结 思路:循环使用 robotjs 库模拟键盘点击,从而实现输入法刷自动刷字数的功能. 安装依赖 npm i robotjs Vue代码 在 Vue 中编写一个文本域用来聚焦输入法焦点. 思路:当我们按下 S 键时,给 Electron 发送消息告诉 Electron 开始刷字数; 当我们按下 E 键时,告诉 Electron 停止自动刷. <template> <textarea @keyup.stop="onKeyup&

  • vue组件三大核心概念图文详解

    前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,

  • vue路由分文件拆分管理详解

    这里说的路由拆分指的是将路由的文件,按照模块拆分,这样方便路由的管理,更主要的是方便多人开发.具体要不要拆分,那就要视你的项目情况来定了,如果项目较小的话,也就一二十个路由,那么是拆分是非常没必要的.但倘若你开发一些功能点较多的商城项目,路由可以会有一百甚至几百个,那么此时将路由文件进行拆分是很有必要的.不然,你看着index.js文件中一大长串串串串串串的路由,也是很糟糕的. 首先我们在router文件夹中创建一个index.js作为路由的入口文件,然后新建一个modules文件夹,里面存放各

随机推荐