uniapp 语音文本播报功能

文章介绍了如何在uniapp项目中实现在接口调用成功后进行语音播报,通过知意配音工具生成mp3文件,并利用uni.createInnerAudioContext()创建播放器播放音频,提供了一段Vue.prototype.ScanAudio的示例代码用于在需要的地方调用播放功能。

最近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();//播放语音  结合自己项目需求调用
UniApp H5 应用中实现语音播报功能,通常可以通过调用 Web Speech API 或使用第三方 TTS(Text-to-Speech)服务来完成。以下是几种可行的组件和方案推荐: ### 1. 使用 Web Speech API 实现基础 TTS 功能 Web Speech API 是浏览器原生支持的语音合成接口,适用于大多数现代浏览器。可以在 UniApp 的 H5 端直接调用该 API 来实现语音播报。 ```javascript function speak(text) { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'zh-CN'; // 设置语言为中文 speechSynthesis.speak(utterance); } ``` 此方法无需额外引入组件或依赖,适合简单的文本语音需求[^1]。 ### 2. 使用 uni.createInnerAudioContext 播放远程 TTS 音频 若需更高质量的语音合成效果,可以借助云端 TTS 服务(如百度 AI、阿里云、讯飞等),将文本转换为音频文件后播放。 ```javascript const audioUrl = 'https://tts.example.com/speak?text=你好世界'; const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.src = audioUrl; innerAudioContext.play(); ``` 这种方式适用于需要多语言支持、语音情感控制等高级功能的场景[^1]。 ### 3. 第三方组件推荐 - **uni-speech-tts**:这是一个专为 UniApp 设计的 TTS 插件,支持 H5 和 App 平台,封装了 Web Speech API,并提供了统一的接口调用方式。 - **uView UI 的 tts 组件**:uView 提供了语音播报相关组件,简化了开发流程,同时兼容多种平台。 ### 4. 自定义封装 TTS 组件 可基于上述方法自行封装一个通用的 TTS 组件,示例如下: ```vue <template> <view> <button @click="playTTS">播放语音</button> </view> </template> <script> export default { methods: { playTTS() { const text = '欢迎使用 UniApp语音播报功能'; if (typeof window.speechSynthesis !== 'undefined') { const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'zh-CN'; window.speechSynthesis.speak(utterance); } else { uni.showToast({ title: '当前环境不支持语音播报' }); } } } }; </script> ``` 此类自定义组件便于复用,并能根据业务需求灵活扩展功能[^1]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值