应用场景

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

目标用户

学生、运动达人

实现思路

整体思路

通过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