uni-app/vue 文字转语音朗读(附小程序语音识别和朗读)

    语音播报的实现的方法有很多种,我这里介绍集中不引用百度、阿里或者迅飞的API的实现方式。

一、采用new SpeechSynthesisUtterance的方式

废话不多说直接上代码

data() {return {utterThis:null,}
},//方法使用this.utterThis = new SpeechSynthesisUtterance('');
this.utterThis.pitch = 1; // 音高
this.utterThis.rate = 1; // 语速
this.utterThis.volume = 1; // 音量
this.utterThis.lang = 'zh-CN';
this.utterThis.text =  "要播报的文本内容";
window.speechSynthesis.speak(this.utterThis); //开始朗读

方法的结束事件

this.utterThis.onend = () => {  //结束事件   window.speechSynthesis.cancel()   //注销合成方法
}

二、采用speak-tts插件的方式

1、安装speak-tts

npm install speak-tts

2.使用

import Speech from 'speak-tts'  //引入初始化调用
this.speechInit();speechInit(){this.speech = new Speech();this.speech.setLanguage('zh-CN');this.speech.init().then(()=>{console.log('语音播报初始化完成')})
},this.speech.speak({text:item.newsContent}).then(()=>{this.speech.cancel(); //播放结束后调用
})

三、微信小程序可以采用微信提供的插件

1、添加插件 

2.由于我用的是uni-app,所以manifest.json添加配置

"mp-weixin" : {"appid" : "这个是小程序的appid","setting" : {"urlCheck" : true,"es6" : true,"minified" : true,"postcss" : false},"optimization" : {"subPackages" : true},"usingComponents" : true,"plugins" : {"WechatSI" : {"version" : "0.3.5","provider" : "填写刚才申请的appid"}}},

3.项目中使用

//条件编译  引入插件// #ifdef MP-WEIXIN
var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager()
// #endif
// #ifdef MP-WEIXIN
let _this=this 
plugin.textToSpeech({lang: "zh_CN",tts: true,content: playword,success: function(res) {_this.src = res.filename //这个就是生成成功的音频_this.smallRoutine(item,playword,index);},fail: function(res) {}
})
// #endif//然后利用uni.createInnerAudioContext() 进行播放
//如果不会使用  请移步 https://uniapp.dcloud.net.cn/api/media/audio-context.html#createinneraudiocontext
this.innerAudioContext = uni.createInnerAudioContext()
this.innerAudioContext.pause();
this.innerAudioContext.volume = 1
this.innerAudioContext.src = this.src
this.innerAudioContext.play()
this.innerAudioContext.onEnded(()=>{//监听结束事件  做自己的处理逻辑
})

 4.如果合成音频不能播放可进行开发文档状态码查询 。(有时候可能文字过长无法合成报错,我这里可以提供一种思路,文字截取一段一段的) 

比如:(全部代码就不贴了)

let strlength =this.contentTxt.slice().length;
if(strlength>200){this.playAllNum=Math.ceil(strlength / 200); playword = this.contentTxt.slice(0,200) 
}else{this.playAllNum=1; playword =this.contentTxt
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/4695.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

辉哥带你学hive第八讲

1.自定义函数 1.1 自定义函数类型 根据用户自定义函数类别分为以下三种: (1)UDF(User-Defined-Function) 一进一出。 (2)UDAF(User-Defined Aggregation Function) 用户…

Python一行命令搭建HTTP服务器并外网访问 - 内网穿透

文章目录 1.前言2.本地http服务器搭建2.1.Python的安装和设置2.2.Python服务器设置和测试 3.cpolar的安装和注册3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 转载自远程内网穿透的文章:【Python】快速简单搭建HTTP服务器并公网访问「cpolar内网穿透…

基于kubesphere的k8s环境部署三节点的rook-ceph集群

文章目录 前言链接:[基于kubesphere的k8s环境部署单点版本的rook-ceph](https://blog.csdn.net/baidu_35848778/article/details/131050918) 一、rook-ceph是什么?二、开始部署2.1 环境准备2.2 软件包准备,计算\存储节点执行2.3 下载rook-cep…

Android 使用webView打开网页可以实现自动播放音频

使用webview 自动播放音视频,场景如,流媒体自动部分,音视频通话等。会出现如下问题: 解决方案如下: 配置webview 如下,这样可以自动播放音频。 webView.getSettings().setMediaPlaybackRequiresUserGestur…

[游戏开发][Unity]出包真机运行花屏(已解决)

花屏真机截屏 原因 原因是启动项目时的第一个场景没有相机是 Skybox或者SolidColor模式,我的启动场景只有一个UI相机,且Clear Flags是DepthOnly 解释: https://blog.csdn.net/yanchezuo/article/details/79002318

【电磁泄密】网络杂谈(2)之电磁泄密及防护

涉及知识点 什么是电磁泄密,电磁泄密的渠道,电磁泄密该如何去防护,电磁泄密的防护标准。深入了解电磁泄密防护手段。 原创于:CSDN博主-《拄杖盲学轻声码》,更多内容可去其主页关注下哈,不胜感激 文章目录 …

计算机网络————应用层

文章目录 概述域名系统DNS域名结构域名服务器解析过程常见的DNS记录DNS报文格式基础结构部分问题部分资源记录(RR, Resource Record)部分 万维网WWWURLHTTPHTTP发展HTTP报文结构请求报文响应报文 cookie 内容分发网络CDN 概述 应用层的具体内容就是规定应用进程在通信时所遵循的…

使用maven中的profile动态打包不同环境的配置文件

maven中的profile可以在打包时动态选择不同的配置文件进行打入,在项目具有开发、测试、生产环境时可以更方便优雅的进行不同环境的打包运行 示例图: 1-配置profile 第一步需要为每个环境配置一个profile标签,在pom文件中进行配置。我这里只…

Python———运行环境搭建

不管用什么工具开发 Python 程序,都必须安装 Python 的运行环境。 目前最常用的是Windows 、 Linux 平台。这里 我们以Windows10为主讲解。 其实编程和平台关系不大。大家也可以使用Linux、Mac。 Windows 平台下 Python 环境搭建 第一步:进入 python 官…

Java爬虫与Python爬虫有什么区别

Java爬虫和Python爬虫是两种常见的网络爬虫实现方式,它们在语言特性、开发环境和生态系统等方面存在一些区别。 1. 语言特性:Java是一种面向对象的编程语言,而Python是一种脚本语言。Java较为严谨,需要明确定义类、方法和变量&…

Python如何免费获取付费文档的数据, 保存word文档

目录标题 前言开发环境:模块使用:代码实现步骤:代码展示尾语 前言 嗨喽~大家好呀,这里是魔王呐 ❤ ~! 开发环境: python 3.8 pycharm 模块使用: requests --> pip install requests re json time base64 docx --> pip install python-docx 第三方模…

5.4、docker-compose

h ttps://www.runoob.com/docker/docker-compose.html Docker Compose docker-compose.yml 配置文件编写详解_docker-compose.yml 编写_种子选手的博客-CSDN博客 docker-compose.yml 配置文件编写详解 1.dockerfile: 构建镜像; 2.docker run: 启动容器;…