uniapp 语音文本播报功能

最近uniapp项目上遇到一个需求 就是在接口调用成功的时候加上语音播报 , '创建成功' '开始成功' '结束成功' 之类的。

因为是固定的文本 ,所以我先利用工具生成了 文本语音mp3文件,放入项目中,直接用就好了。

这里用到的工具:知意配音

链接地址:https://peiyin.wozhiyi.com/newproduction.html

每天可免费下载2次,点链接进去有使用说明,实在不会的可私信我。

总之用起来挺方便的。

接下来,代码部分。

1. 在min.js文件里加入以下代码:

Vue.prototype.ScanAudio = function() {
	var music = null;
	music = uni.createInnerAudioContext(); //创建播放器对象 
	music.src = "../../static/cjcg.mp3";  //这里引入自己生成的mp3音频文件地址
	music.play(); //执行播放
	music.onEnded(() => {
		//播放结束
		music = null;
	});
}

2.在需要使用的页面直接调用:

//这里为接口请求成功的回调里 播放语音提示  
	this.ScanAudio();//播放语音  结合自己项目需求调用
相关推荐
小跳不会Coding4 小时前
uniapp通过v-if进行判断时,会出现闪屏?【已解决】
uni-app
林小白的日常6 小时前
uniapp中wx.getFuzzyLocation报错如何解决
前端·javascript·uni-app
ganlanA7 小时前
uniapp+vue 前端防多次点击表单,防误触多次请求方法。
前端·vue.js·uni-app
爱吃鱼的酱酱仔7 小时前
uniapp实现APP、小程序与webview页面间通讯
小程序·uni-app
贾宝玉的玉宝贾14 小时前
FreeSWITCH 简单图形化界面38 - 使用uniapp中使用JsSIP进行音视频呼叫
uni-app·音视频·voip·freeswitch·ippbx·jssip
xfxTab16 小时前
uniapp中Nvue白屏问题 ReferenceError: require is not defined
uni-app
于慨1 天前
uniapp打包h5应用如何开启history模式,以及资源管理器直接打开存在问题
uni-app
姥姥家的饭1 天前
uniapp 文本转语音
uni-app
素**颜1 天前
uniapp 基于xgplayer(西瓜视频) + renderjs开发,实现APP视频播放
javascript·uni-app·音视频
顽疲1 天前
从零用java实现 小红书 springboot vue uniapp (6)用户登录鉴权及发布笔记
java·vue.js·spring boot·uni-app