• 当前标签:小程序录音

程序开发 微信小程序 简单计时器制作

小程序简单计时器的制作,也可用于倒计时,以录音计时为例: // 计时器 function timer(that){   // timeout则跳出递归   if (that.data.record == 0){     return;   }   if(that.data.min == 10){     return;   }   let sec = that.data.sec * 1   let min = that.data.min * 1   sec += 1   if(sec < 10){     sec = '0' + sec;   }else if(sec == 60){     sec = '00'     min += 1   }   if(min < 10){     min = '0' + min   }   that.setData({     sec: sec,     min: min   })   setTimeout(function(){     timer(that);   },1000) } Page({   /**    * 页面的初始数据    */   data: {     record: 0, // 录音按钮显示状态     sec: '00',     min: '00',   },   // 开始录音   startRecord: function (e) {     let that = this;     that.setData({       sec: '00'     })     recorderManager.start(options);     recorderManager.onStart(() => {       that.setData({         record: 1       })       timer(that);     })   },   // 停止录音   stopRecord: function (e) {     let that = this;     recorderManager.stop();     recorderManager.onStop((res) => {       console.log('recorder stop', res)       const { tempFilePath } = res       wx.showToast({         title: '录音保存成功',         icon: 'success',         duration: 2000       })       that.setData({         record: 0       })       timer(that);     })   }, })

2018-03-09 17:45:20 297 1 0
阅读详情

程序开发 小程序按住录音和录音预览播放

wxml代码: <!-- 录音 -->     <view>       <!-- 预览 -->       <view wx:if="{{voice}}">         <view class='yy_box'>           <view class='yy_box_bg' bindtap='play'>             <view class="yy_box_icon {{onPlay?'audio-animation':''}}"></view>           </view>           <text>{{playDuration}}"</text>         </view>       </view>       <!-- 录音按钮 -->       <view class='recorder'>         <button bindtouchstart='recorderS' bindtouchend='recorderE'>按住说话</button>       </view>     </view>   </view>   wxss代码: .yy_box {   display: flex;   align-items: center; } .yy_box_bg {   width: 130px;   height: 30px;   background-color: #9eea6a;   margin: 0 10px;   border-radius: 5px; } .yy_box_bg::before {   content: '';   display: block;   width: 0;   height: 0;   border-top: 5px solid transparent;   border-right: 10px solid #9eea6a;   border-bottom: 5px solid transparent;   position: relative;   left: -10px;   top: 10px; } .yy_box_icon {   width: 11.5px;   height: 14.5px;   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAABXCAYAAADvct7MAAAEWElEQVRYhe2Zz0sjZxjH37/iGWLe6QRHl7A4RBoliFGEtLCXRZQqrIoQ8VAICKIe0kPIQqJx/TGCxDgzeecNe1loD0tvhW6PLWwPpXR7KT0slBbEslQpsixZNj00b5h9fScz68xpNw/Mxdf388w87/M879dHhHrWsw/EAEBiT6hgRVEilNJzwzBalNJzjHE0NCe2bT83DKPlfNLpdCIUBwcHB1/ycMMwWmNjY1pgOABIuq4/5uG2bZ+F8vYAIFFKz3gHiUTiVmA4QgjlcrkcD19fX18PBT49Pf0JD9/a2voiMBgApJ2dHcLDl5eXPwsMTyQSt0QZoyhKJBBYluU+QkiTB+/t7T0KnC2Li4szgjR8HloaGobxEwMfHx9/F2qPAQAplUrdDq3se9aznvXMxQBASqfTCU3T+kNvZKenp09Zp9R1/evQHCwsLEzzPZ4Q0gxFjWGMo6LbyTCMlqZp/e8EAwCVPexnAwMDmGlI/gt8360Y40FK6WVbiF7GYrE4c9IWqS94B77PgBByTWmNj49PMAfxeDwmCk88Ho95wvf3978RbZ6amppqh0wqFosP+PVSqVT1hAOAenR09ESgAK6c4eHXKaXnnnDmwLbtCx4wPDw8yt6ej71pmi3fabm2tpbn4RsbG2W2blnWM37dN3x2dvaaOMrn87oD/uuN4ACgViqVr/jNKysrnzvC8lbY6vX6Gz/wjzRNS4oyBmM8iND/FSs40D893xpjPFiv19/wmw8PD5+0q1aqVCqUXy8Wiw884UtLS1lBiZ+xNEylUrdFXyXLcp8nHABU0zR/Y5uq1eqPDIwxjlJKX/Lg3d3dh74zBQDUZDKZmpycnGRgVVVlSumVINYXgdtuuVyuCcBXgf/aQAihoaEhlUu930O7jQBAUhQlUiqVqqurq8s93f6eGQBI7aI6o5S+ymQyo6FmT6BKfVc4KyxZlvsCOQEAaW5u7o5pmtcc+FYDTphIiGqa1i/qOYSQpt9O2VWIYoyjjUbjX96BrxbhR4hqmtZvWda1SyaXy+W6wv0K0ZmZmU8Fb//23SqaiLoJUdu2X7O2CwDSycnJ9/zvFAqFCkKo+0TUjxDlWzNLTwCQPCeiXkIUACSRYBoZGRlynYhOTEx8zDZ7CdFsNntPqA7cJqKU0n+c4RGsd4SoqHpN0/ylsyiaiCaTybhj3VWIAoBECHnNOX/RyRjRRHRzc3OLrXsJ0UajccnBX3bgooloPp+/74B3FaJ8S+jA3Sai2Wz2niMsrkK0HZYmB79ACHlPRL2EqOhALct65joR1XX9MataLyE6Pz9/l1/f3t42PSeiXkK03UF/ENZJt4moHyEqChkhpNk5bNFE1I8QdSvAcrlcQ93MjxDNZDKj3ULmal5CtB2yVzy4UChUPG+jbkIUACTbtv8QfFmw/9AoihKxbfsvQaNqYYyjNwYjhJBhGD/fKM5+rNFo/C065FCUl6IokVqt9rRdE992g/4H+ecsUNqAjLcAAAAASUVORK5CYII=) no-repeat;   background-size: 11.5px 43.5px;   background-position: 0 -29px; /* 默认第三张 */   position: relative;   left: 15px;   top: -2px; } .audio-animation {   animation: voiceplay 2s infinite step-start; } @keyframes voiceplay{   0%, 100%{     background-position: 0 -29px;   }   33.333%{     background-position: 0 0;   }   66.666%{     background-position: 0 -14.5px;   } } .yy_box text {   color: #999; }   js代码: data: {     recorderTempFilePath:'', // 录音地址     playDuration: '', // 播放时间     onPlay:false, // 播放状态样式判断     voice: false, // 预览语音显示   }, // 按住录音   recorderS:function(){     const options = {       duration: 600000,       sampleRate: 44100,       numberOfChannels: 1,       encodeBitRate: 192000,       format: 'mp3',       frameSize: 50     }     // 开始录音     recorderManager.start(options);     recorderManager.onStart(() => {       // console.log('recorder start')       wx.showLoading({         title: '录音中...',       })     })     //错误回调     recorderManager.onError((res) => {       console.log(res);       wx.hideLoading();       wx.showToast({         title: res,         icon: 'success',         duration: 1000       })     })   },   // 录音结束   recorderE:function(){     let that = this;     // 结束录音     recorderManager.stop();     recorderManager.onStop((res) => {       wx.hideLoading();       wx.showToast({         title: '录音结束',         icon: 'success',         duration: 1000       })       // console.log('recorder stop', res)       const { tempFilePath, duration } = res       let recorderTempFilePath = tempFilePath;       let playDuration = Math.ceil(duration / 1000);       that.setData({         recorderTempFilePath: recorderTempFilePath,         playDuration: playDuration,         voice: true       })     })   },   // 播放录音   play:function(){     let that = this;     let recorderTempFilePath = that.data.recorderTempFilePath;     innerAudioContext.autoplay = true     innerAudioContext.src = recorderTempFilePath     innerAudioContext.onPlay(() => {       // console.log('开始播放')       that.setData({         onPlay:true       })     })     innerAudioContext.onError((res) => {       // console.log(res.errMsg)       // console.log(res.errCode)       wx.showToast({         title: res.errMsg,         icon: 'success',         duration: 2000       })     })     // 播放结束     innerAudioContext.onEnded((res)=>{       that.setData({         onPlay: false       })     })   },

2018-02-14 22:05:46 221 0 0
阅读详情
  • 1
前往