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();//播放语音  结合自己项目需求调用
相关推荐
Json____10 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
web_Hsir18 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir18 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa20 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘1 天前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界2 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨2 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆2 天前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na012 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir2 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++