• 当前标签:播放录音

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

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 140 0 0
阅读详情
  • 1
前往