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();//播放语音  结合自己项目需求调用
相关推荐
小小黑0075 小时前
总结运行CRMEB标准版(uniapp)微信小程序的问题
微信小程序·小程序·uni-app
她说她一如既往的爱我5 小时前
uniapp 实现选择文件上传相册选择拍摄的upload
uni-app
!win !1 天前
支付宝小程序IDE突然极不稳定
uni-app·支付宝小程序
2501_916007471 天前
Charles中文版抓包工具使用指南 提高API调试和网络优化效率
android·ios·小程序·https·uni-app·iphone·webview
Rudon滨海渔村1 天前
[失败记录] 使用HBuilderX创建的uniapp vue3项目添加tailwindcss3的完整过程
css·uni-app·tailwindcss
chenburong20211 天前
uniapp-vue2导航栏全局自动下拉变色
vue.js·uni-app
jaqi.l2 天前
uni-app vue3 小程序接入 aliyun-rtc-wx-sdk
小程序·uni-app·实时音视频
2501_916008892 天前
iOS混淆工具有哪些?在集成第三方 SDK 时的混淆策略与工具建议
android·ios·小程序·https·uni-app·iphone·webview
2501_915921432 天前
Windows 如何上架 iOS 应用?签名上传全流程 + 工具推荐
android·ios·小程序·https·uni-app·iphone·webview
雪芽蓝域zzs2 天前
uniapp 数组的用法
前端·javascript·uni-app