【App开发】有语音播报功能的摇号软件：演示视频、开发历程

文章目录

1 故事背景
2 开发历程
- 2.1 技术选用
- 2.2 语音播报功能
- 2.3 生成随机数
- 2.4 前端页面编写
3 演示效果

1 故事背景

昨晚网上有人找我制作一个自动随机数摇号并语音播报出来结果的App，具体播报要求为，摇号时的语音提示，摇出结果后，按“1号…，2号… …”这样读下去，可终止、暂停、继续。

考虑到这App的开发在我的能力范围内，便接了下来。由于这是我开发的第一个包含语音类型的软件，因此特意将此次经历记录下来。

2 开发历程

2.1 技术选用

我选用的是 Uniapp 平台技术，可以将项目一键打包为多平台的软件，因客户机型为安卓系统，我平时也是擅长 PC 开发，因此这个技术再合适不过了。

语音播报技术采用百度的语音播报接口：

#tex：内容
#per：音色
#spi：语速
https://tts.baidu.com/text2audio.mp3?tex=内容&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3;

2.2 语音播报功能

（注：建议 uni.createInnerAudioContext() 音频对操作对象，在全文只创建一个）

（1）在全局创建音频对操作对象

// 在js中创建音频对象
var innerAudioContext = uni.createInnerAudioContext(); //uniapp中的音频操作对象
innerAudioContext.autoplay = false; //禁止自动播放
innerAudioContext.src = ''; //音频文件的请求地址
innerAudioContext.crossOrigin="anonymous"; //解决跨域问题

（2）音频播放、暂停、终止

playMusic(){ //播放音乐var that =this;if (this.tmp == 0) {innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + '开始摇号，请稍等' +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per为音色：设置为1,2，3，有不同的音色,this.spd为朗读的速度        //将生成的mp3赋值给innerAudioContextinnerAudioContext.play();} else {innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + '继续摇号，请稍等' +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per为音色：设置为1,2，3，有不同的音色,this.spd为朗读的速度      //将生成的mp3赋值给innerAudioContextinnerAudioContext.play();}// --------setTimout方式// for (let i = 0; i < this.content.length; i++) {//     timeClear = (function(j) {//         setTimeout( function timer() {//             innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + that.content[j] +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per为音色：设置为1,2，3，有不同的音色,this.spd为朗读的速度     //将生成的mp3赋值给innerAudioContext//             innerAudioContext.play();//         }, j*3000 );//     })(i);// console.log(timeClear)// }// -----------setInterval方式clearInterval(clearNum);clearNum = setInterval(function() {console.log(that.content[i])innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + (that.tmp+1) +'号' + that.content[that.tmp] +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per为音色：设置为1,2，3，有不同的音色,this.spd为朗读的速度     //将生成的mp3赋值给innerAudioContextinnerAudioContext.play();that.tmp++;if (that.tmp == that.content.length) {clearInterval(clearNum)that.tmp = 0;}}, 5000)
},pauseMusic() {clearInterval(clearNum);
},stopMusic() {clearInterval(clearNum);this.tmp = 0;
}

2.3 生成随机数

getRandomNums(minNum, maxNum, size) {
if (parseInt(minNum) > parseInt(maxNum)) {uni.showToast({title:'输入错误-1'})return;}console.log(minNum + " " + maxNum + " " + size)let numArr = [];if (this.repeat == '可重复') {console.log("yes-rnd")for (let i = 0; i < size; i++) {// Math.random()*(maxNum-minNum)+minNum：[minNum, maxNum)maxNum = parseInt(maxNum)minNum = parseInt(minNum)size = parseInt(size)let rnd = parseInt(Math.floor(Math.random()*(maxNum-minNum+1)+minNum));numArr.push(rnd);}// console.log(2222)console.log(numArr)// console.log(2222)} else {if ((parseInt(maxNum) - parseInt(minNum)) + 1 < parseInt(size)) {uni.showToast({title:'输入错误-2'})return;}let i = 0;let numMap = {};while (i < size) {console.log("no-rnd")let rnd = parseInt(Math.random()*(maxNum-minNum+1)+minNum, 10) + 1;if (numMap[rnd] == undefined) {numMap[rnd] = '1';numArr.push(rnd);i++;}}}return numArr;
},generateNums() {this.content = this.getRandomNums(this.minNum, this.maxNum, this.size);// console.log(this.content)
}

2.4 前端页面编写

3 演示效果

重点是播报功能，已放到 blibli 上：B站演示视频链接

【App开发】有语音播报功能的摇号软件

【App开发】有语音播报功能的摇号软件：演示视频、开发历程相关推荐

uniapp开发app实现支付语音播报功能
思路: ①.通过websocket长连接的形式实时接收用户付款信息. ②.因为后端给的金额为数字形式的例如 315.25.我们需要将金额转换为读的方式三百一拾伍点二五. ③.因为这个金额不是固定的所 ...
APP收款语音播报功能讲解
一.背景比起主动扫码能确定收款多少与是否到账,扫二维码支付场景不能直接确认,需要核对客户付款截屏,目前微信.支付宝在扫二维码支付后,均支持收款方自动播报收款到账信息,为了秦丝APP有更好体验,也需要 ...
iOS 后台语音播报功能开发过程中的那些坑
上个版本的开发计划中产品同学建议在我们的商家版App中做后台语音播报功能,在评审的时候我就在想,完全可以通过Push静默推送来实现后台播放音频来实现(后续事实证明,这是个大坑). 关于静默推送 ...
实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
php加入语音播报功能_PHP实现语音播报功能
大家估计都知道现在很多AI音响能够给你播报天气,叫你起床...甚至能够接受语音指令!所谓的人工智能音响,听起来很高大上,都说PHP是最好的编程语言,今天我就带大家来实现一个语音播报功能!先大体说一个思 ...
安全教育APP开发应该具备哪些功能
安全意识在我们的日常生活中非常重要,加强安全意识是有效解决安全事故的方法之一,让用户更好地预防安全事故,为了更好地让用户学习安全知识.安全教育APP就出现了,接下来小编就跟大家聊聊安全教育APP开发应 ...
MediaPlayer实现金额的语音播报功能
推荐阅读: SurfaceView+MediaPlayer封装之路 Android学习资源分享合集(1) 最近写了一个金额的语音播报功能,已封装成依赖库到Github,希望对大家有所帮助. Githu ...
MediaPlayer实现金额的语音播报功能 1
推荐阅读: SurfaceView+MediaPlayer封装之路 Android学习资源分享合集(1) 最近写了一个金额的语音播报功能,已封装成依赖库到Github,希望对大家有所帮助. Githu ...
二手交易app开发可以定制哪些功能
二手交易app开发可以定制哪些功能,主要有推送闲置物品信息.闲置物品显示.交易安全.双方沟通平台.在线预约.商品分类功能.在线支付.产品上下架等. 二手交易app开发定制的功能 1.推送闲置物品信息 ...