我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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语音播报内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

C#如何实现文字转语音功能

本文小编为大家详细介绍“C#如何实现文字转语音功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“C#如何实现文字转语音功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果图关键是,c#有现成的一个引用右键点击
2023-06-29

C#实现汉字转拼音(多音字)功能详解

这篇文章主要为大家详细介绍了如何利用C#实现汉字转拼音(支持多音字)的功能,文中的示例代码讲解详细,对我们学习C#有一定的帮助,感兴趣的小伙伴可以跟随小编一起了解一下
2023-02-15

Android studio如何实现语音转文字功能

这篇文章主要介绍了Android studio如何实现语音转文字功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、在科大讯飞的官网上注册并下载SDK1.首先去讯飞开放平台
2023-06-29

uniapp如何调用百度语音实现录音转文字功能

这篇文章给大家分享的是有关uniapp如何调用百度语音实现录音转文字功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。经历三天时间各种遇到困难 之后终于实现了这个功能,参照网上了许多文章 才找到一个能正常实现的方
2023-06-22

C#怎么实现文本转语音功能

这篇文章主要介绍“C#怎么实现文本转语音功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“C#怎么实现文本转语音功能”文章能帮助大家解决问题。这种方式的优点在于不会被浏览器限制,在js的文本转语音功
2023-06-29

详解如何利用C#实现汉字转拼音功能

这篇文章主要为大家详细介绍了如何利用C#实现汉字转拼音的功能,文中的示例代码讲解详细,对我们学习C#有一定的帮助,感兴趣的小伙伴可以跟随小编一起了解一下
2022-12-23

vue怎么实现文本转语音

vue实现文本转语音的方法:1、创建一个SpeechSynthesisUtterance对象;2、通过“isIe(){...}”方式实现浏览器判断;3、根据ie使用方法即可,代码如“if(this.isIe()){let voiceObj = new ActiveXObject("Sapi.SpVoice")voiceObj.Rate = ...)”。
2022-11-22

vue如何实现文本转语音

本篇内容介绍了“vue如何实现文本转语音”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue实现文本转语音的方法:1、创建一个SpeechS
2023-07-04

电脑如何实现语音输入文字功能

电脑实现语音输入文字功能主要依赖语音识别技术。下面是一种常见的实现方式:1. 麦克风:首先需要通过一个麦克风或者其他录音设备来获取语音输入。2. 语音输入软件:需要安装一个语音输入软件,常见的有Google语音输入、Windows语音识别等
2023-09-05

android实现汉字转拼音功能 带多音字识别

android 汉字转拼音带多音字识别功能,供大家参考,具体内容如下 问题来源 在做地名按首字母排序的时候出现了这样一个bug。长沙会被翻译拼音成zhangsha,重庆会被翻译拼音成zhong qing。于是排序出了问题。汉字转拼音库和多音
2022-06-06

编程热搜

目录