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();//播放语音  结合自己项目需求调用
相关推荐
lhldsg14 小时前
家政派单系统开发实战:从需求分析到智能调度全流程指南
java·junit·小程序·uni-app·需求分析
PedroQue9919 小时前
v2.6.0 新增全局返回守卫与 iOS 侧滑拦截,补齐跨端路由拦截能力
前端·uni-app
蜡台1 天前
Uniapp 开发H5 页面跳转拦截
前端·javascript·uni-app
宠友信息2 天前
内容社区源码开发实践解析,用Spring Boot打造1:1仿小红书源码平台
java·spring boot·redis·websocket·mysql·spring·uni-app
梦曦i2 天前
Vue-Router 2.4.0 新增可控重定向功能
前端·uni-app
郑州光合科技余经理2 天前
海外版外卖系统架构:订单怎么流转、权限怎么分
java·开发语言·前端·系统架构·uni-app·php·ai编程
qq_316837752 天前
uniapp 安卓/H5 使用 contentEditable 属性 富文本编辑器
android·javascript·uni-app
小满zs3 天前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app
sunphp开发者3 天前
制作手绘地图瓦片切图
前端·uni-app