评论

#小程序云开发挑战赛#-语音倒计时器-跑得脱马脑壳

#小程序云开发挑战赛#-语音倒计时器-介绍

应用场景

需要倒计时的场景,如运动、烹饪、比赛等计时场景。

目标用户

学生、运动达人

实现思路

整体思路

通过TTS获取特定时间节点的语音,并转化为字符格式,存入云开发数据库。前端通过脚本计时器每秒执行canvas动画及判断是否需要播放语音,如需播放则将字符串格式音频文件转化为mp3文件,并放置在用户临时文件夹,最后播放音频即可。

界面思路

界面上分为三个状态色:

  1. 灰色:未启动
  2. 绿色:计时中
  3. 红色:计时完成

canvas部分:

  1. 圆圈部分:让用户直观的了解大致的时间情况。
  2. 时间字符部分:让用户准确了解当前剩余时间情况。

按钮部分:

  1. 重置按钮
  2. 开始/暂停按钮
  3. 设置按钮

效果截图




功能代码展示

start:function(){
		if( this.data.getAudioIsRunning ){
			return;
		}
		if( this.data.timer ){
			clearInterval( this.data.timer )
		}
		var that = this;
		if( this.data.isFinish ){
			this.drawText( this.data.time );
			this.drawRound(1);
		}
		that.setData({
			isFinish:false,
			isPlay:true
		});
		wx.vibrateShort();
		that.data.count = that.data.time
		that.data.timer = setInterval( function(){
			if( !that.data.isPause ){
				that.data.count--;
				that.drawText( that.data.count );
				that.drawRound( that.data.count  /that.data.time  );
				if(that.data.audioId > 0 && app.globalData.userData.audioData && app.globalData.userData.audioData._id == that.data.audioId && app.globalData.userData.audioData.data[that.data.count] ){
					console.log("准备播放",that.data.audioId,that.data.count )
					var filePath = wx.env.USER_DATA_PATH+"/currentAudio-"+that.data.count+".mp3";
					fs.writeFile({
						filePath:filePath,
						data:app.globalData.userData.audioData.data[that.data.count],
						encoding:"base64",
						success:function(res){
							if( res.errMsg == "writeFile:ok" ){
								innerAudioContext.src = filePath;
							}else{
								console.error("fs返回验证失败",res)
							}
						},
						fail:function( err ){
							console.error("fs-write失败",err)
						}
					})
				}
				if( that.data.count <= 0 ){
					wx.vibrateLong();
					that.setData({
						isFinish:true,
						isPlay:false
					})
					clearInterval( that.data.timer )
					return;
				}
			}
			
		} , 1000 )
	}

作品体验二维码

团队介绍

团队名:跑得脱马脑壳
团队成员:Laidz

最后一次编辑于  09-04  
点赞 4
收藏
评论

1 个评论

  • 守一
    守一
    星期四 15:58

    我们团队想要开发一个小程序,可以合作吗?如可以合作,欢迎加微信:mfj-1991-rsf

    星期四 15:58
    赞同
    回复
登录 后发表内容