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();//播放语音  结合自己项目需求调用
相关推荐
dccose8 分钟前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
上优5 小时前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
耶啵奶膘17 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o1 天前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index1 天前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情1 天前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app