uni小程序中如何使用“百度语音”合成功能实现语音播报

提示:本案例是总结自己在实现小程序播放功能的一些操作,方便以后自己查找



前言

一、如何使用百度语音?

首先需要进入百度智能云注册一个账号并且创建一个自己的应用。

二、使用步骤

1.注册百度开发账号

百度智能云网址 登录注册完成进入当前页面
在这里插入图片描述

2.点击创建应用

拿到创建成功之后的 AppID、API Key、Secret Key(一会调用接口时会用到)
在这里插入图片描述


3.查看技术文档

因为我们这里需要的是将文字转成语音,所以用到的是语音合成技术

官网案列


用 postman 调用一下, 果然可以
  1. 获取百度平台返回的 token
    在这里插入图片描述
    2.调用语音合成接口
    在这里插入图片描述

4.小程序中接入

那么我们在小程序中要如何使用呢?

  • 首选需要将这两个地址添加到我们自己的微信小程序(request合法域名)
    地址:
    https://aip.baidubce.com;
    https://tsn.baidu.com;

5.小程序中播放

  • 注意代码要写到 onLoad 声明周期中
				const innerAudioContext = wx.createInnerAudioContext()
				wx.request({
					url: 'https://aip.baidubce.com/oauth/2.0/token',
					data: {
						grant_type: 'client_credentials',
						client_id: 'DjiQcGS*****',
						client_secret: 'oLyc0P8lWc****rwrToBGIn'
					},
					success: (res) => {
						if (wx.setInnerAudioOption) {
							wx.setInnerAudioOption({
								obeyMuteSwitch: false,
								autoplay: true
							})
						} else {
							innerAudioContext.obeyMuteSwitch = false;
							innerAudioContext.autoplay = true;
						}
						innerAudioContext.onCanplay(() => {
							console.log('可以播放');
						});
						innerAudioContext.onError((res) => {
							console.log(res.errMsg);
							console.log(res.errCode);
						});
						innerAudioContext.autoplay = true
						innerAudioContext.src = 'https://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=abcdxxx&tok='+res.data.access_token+'&tex=' + encodeURIComponent(***需要转成语音的内容***) + '&vol=5&per=0&spd=5&pit=5&aue=3';
						innerAudioContext.onPlay(() => {
							console.log('开始播放')
						})
					}
				})
### UniApp 中实现语音合成功能的方法 在 UniApp 应用程序中集成百度语音合成服务可以通过调用百度提供的 RESTful API 来完成。具体来说,应用程序先向百度服务器请求访问令牌 (access_token),再利用此令牌发起语音合成请求。 #### 请求 Access Token 为了能够合法地使用百度 AI 平台的服务,开发者需要通过 App ID、API Key 和 Secret Key 这三个参数来换取 access_token[^4]。这一步骤通常只需要执行一次并将获得的结果缓存起来供后续多次调用时使用。 ```javascript // 获取AccessToken函数 function getAccessToken() { const url = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${your_api_key}&client_secret=${your_secret_key}`; uni.request({ url, method: 'POST', success(res) { console.log('Access Token:', res.data.access_token); // 存储或立即用于下一步操作 }, fail(err) { console.error('Failed to obtain AccessToken', err); } }); } ``` #### 发起语音合成请求 一旦拥有了有效的 access_token,就可以构建针对 `/text2audio` 接口的 HTTP POST 请求以转换文本为音频流[^1]。注意设置合适的发音人属性和其他选项来满足特定需求。 ```javascript async function textToSpeech(text, accessToken) { const baseUrl = "http://tsn.baidu.com/text2audio"; let params = new FormData(); params.append("tex", encodeURIComponent(text)); params.append("tok", accessToken); // 使用刚才得到的token params.append("cuid", "my_cuid"); // 用户唯一标识符 params.append("ctp", 1); // 客户端类型,默认为web浏览器 params.append("lan", "zh"); // 输出语言种类 params.append("spd", 5); // 设置语速 params.append("pit", 5); // 设置音调 params.append("vol", 5); // 设置音量大小 params.append("per", 4); // 选择发音人 try { let response = await fetch(baseUrl,{ body:params, headers:{'Content-Type':'application/x-www-form-urlencoded'}, method:'post' }); if (!response.ok){ throw Error(`HTTP error! status: ${response.status}`); } // 将返回的数据作为Blob对象处理并播放声音文件 let blob = await response.blob(); // 创建一个临时链接以便于Audio标签加载该资源 let audioUrl = URL.createObjectURL(blob); // 播放合成后的语音 var audioPlayer = document.createElement('audio'); audioPlayer.src = audioUrl; audioPlayer.play(); } catch(error){ console.error('Error during TTS request:',error.message); } } ``` 上述代码片段展示了如何基于给定的文字内容创建一段语音消息并通过 HTML5 的 `<audio>` 元素进行回放。实际项目开发过程中可能还需要考虑错误处理机制以及优化用户体验等方面的工作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值