广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现文字转语音功能详解
  • 213
分享到

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

2024-04-02 19:04:59 213人浏览 安东尼
摘要

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

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

--结束END--

本文标题: vue实现文字转语音功能详解

本文链接: https://www.lsjlt.com/news/166895.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • vue实现文字转语音功能详解
    目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例 首先new一个SpeechSynthesisUttera...
    99+
    2022-11-13
  • 详解Androidstudio实现语音转文字功能
    目录一、在科大讯飞的官网上注册并下载SDK二、配置安卓项目三、运行效果展示一、在科大讯飞的官网上注册并下载SDK 1.首先去讯飞开放平台申请一个账号(https://www.xfyu...
    99+
    2022-11-13
  • C#实现文字转语音功能
    本文实例为大家分享了C#实现文字转语音的具体代码,供大家参考,具体内容如下 客户提出要求,将文字内容转为语音,因为内网环境,没办法采用联网,在线这种方式,灵机一动,能否写一个简单的例...
    99+
    2022-11-13
  • Python详解文字转语音的实现
    前言: 这是一篇简单的Python文字(汉字)转语音教程,当然对于其他语言工具在实现的方法上也是一样的 。 汉字转语音实现就分为两步,第一步将汉字转为拼音,第二步通过拼音调用相匹配的...
    99+
    2022-11-13
  • C#如何实现文字转语音功能
    本文小编为大家详细介绍“C#如何实现文字转语音功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“C#如何实现文字转语音功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果图关键是,c#有现成的一个引用右键点击...
    99+
    2023-06-29
  • C#实现汉字转拼音(多音字)功能详解
    缘由:根据姓名创建账号,存在生僻字以及多音字 做法:自己根据网上信息自己写了类,词库可能不完整(有待补充) 其他不多说了,先上代码如下: using System; using Sy...
    99+
    2023-02-15
    C#实现汉字转拼音 C#汉字转拼音 C# 汉字 拼音
  • Android studio如何实现语音转文字功能
    这篇文章主要介绍了Android studio如何实现语音转文字功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、在科大讯飞的官网上注册并下载SDK首先去讯飞开...
    99+
    2023-06-29
  • uniapp调用百度语音实现录音转文字功能
    经历三天时间各种遇到困难 之后终于实现了这个功能,参照网上了许多文章 才找到一个能正常实现的方法,网上能找到的例子都不起作用,相信很多人困惑在这,为了避免别人出现这种情况,我分享我的...
    99+
    2022-11-12
  • C#实现文本转语音功能
    由于最近的工作需要用到文本转语音的功能,在网上找到的资料有些不完整,特此记录下整个完整功能。 这种方式的优点在于不会被浏览器限制,在js的文本转语音功能中,谷歌高版本的浏览器会阻止通...
    99+
    2022-11-13
  • uniapp如何调用百度语音实现录音转文字功能
    这篇文章给大家分享的是有关uniapp如何调用百度语音实现录音转文字功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。经历三天时间各种遇到困难 之后终于实现了这个功能,参照网上了许多文章 才找到一个能正常实现的方...
    99+
    2023-06-22
  • VUE文字转语音播放的实现示例
    目录一、技术:Web Speech API二、语音合成及发音接口三、vue项目案例一、技术:Web Speech API Web Speech API​​ 使您能够将语音数据合并到 ...
    99+
    2022-11-13
  • C#怎么实现文本转语音功能
    这篇文章主要介绍“C#怎么实现文本转语音功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“C#怎么实现文本转语音功能”文章能帮助大家解决问题。这种方式的优点在于不会被浏览器限制,在js的文本转语音功...
    99+
    2023-06-29
  • 详解如何利用C#实现汉字转拼音功能
    目录实践过程效果代码实践过程 效果 代码 public partial class Form1 : Form { public Form1() { ...
    99+
    2022-12-23
    C#汉字转拼音 C# 汉字 拼音
  • 详解Unity 实现语音识别功能
    现在语音识别已经被广泛的应用到各个领域中,在Unity开发中,语音识别也非常受欢迎。大部分人都会选择科大讯飞的语音识别功能,但是在一些小的项目中,使用科大讯飞的就有点大材小用了。今天...
    99+
    2022-11-12
  • Python实现语音合成功能详解
    目录导语1.直接使用2. 获取权限2.1 环境准备:2.2 获取权限3. 代码实现3.1 获取access_token3.2 获取转换后音频3.3 配置接口参数3.4 完整demo3...
    99+
    2022-11-13
  • vue怎么实现文本转语音
    本教程操作环境:windows7系统、vue3、Dell G3电脑。vue怎么实现文本转语音?vue实现文字转语音功能详解目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtteranc...
    99+
    2022-11-22
    Vue
  • vue如何实现文本转语音
    本篇内容介绍了“vue如何实现文本转语音”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue实现文本转语音的方法:1、创建一个SpeechS...
    99+
    2023-07-04
  • 基于Python实现语音识别和语音转文字
    目录前言直接使用获取权限1.环境准备2.获取权限代码实现1.获取access_token2.获取转换后音频3.配置接口参数4.完整demo5.执行前言 嗨嗨,大家好呀 ~ 今天给你们...
    99+
    2022-11-11
  • Android通过TextToSpeech实现文字转语音
    一、直接上代码: import android.app.Activity;import android.os.Bundle;import android.speech.tts.TextToSpeech;import android.util...
    99+
    2023-10-10
    android java 开发语言
  • 电脑如何实现语音输入文字功能
    电脑实现语音输入文字功能主要依赖语音识别技术。下面是一种常见的实现方式:1. 麦克风:首先需要通过一个麦克风或者其他录音设备来获取语...
    99+
    2023-09-05
    电脑
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作