应用场景
需要倒计时的场景,如运动、烹饪、比赛等计时场景。
目标用户
学生、运动达人
实现思路
整体思路
通过TTS获取特定时间节点的语音,并转化为字符格式,存入云开发数据库。前端通过脚本计时器每秒执行canvas动画及判断是否需要播放语音,如需播放则将字符串格式音频文件转化为mp3文件,并放置在用户临时文件夹,最后播放音频即可。
界面思路
界面上分为三个状态色:
- 灰色:未启动
- 绿色:计时中
- 红色:计时完成
canvas部分:
- 圆圈部分:让用户直观的了解大致的时间情况。
- 时间字符部分:让用户准确了解当前剩余时间情况。
按钮部分:
- 重置按钮
- 开始/暂停按钮
- 设置按钮
效果截图
功能代码展示
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
我们团队想要开发一个小程序,可以合作吗?如可以合作,欢迎加微信:mfj-1991-rsf