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

原创 黄良钵  2018-02-14 22:05  阅读 536 次 评论 0 条

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

wxml代码:

  1. <!-- 录音 -->
  2.     <view>
  3.       <!-- 预览 -->
  4.       <view wx:if="{{voice}}">
  5.         <view class='yy_box'>
  6.           <view class='yy_box_bg' bindtap='play'>
  7.             <view class="yy_box_icon {{onPlay?'audio-animation':''}}"></view>
  8.           </view>
  9.           <text>{{playDuration}}"</text>
  10.         </view>
  11.       </view>
  12.       <!-- 录音按钮 -->
  13.       <view class='recorder'>
  14.         <button bindtouchstart='recorderS' bindtouchend='recorderE'>按住说话</button>
  15.       </view>
  16.     </view>
  17.   </view>

 

wxss代码:

  1. .yy_box {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. .yy_box_bg {
  6.   width130px;
  7.   height30px;
  8.   background-color#9eea6a;
  9.   margin: 0 10px;
  10.   border-radius: 5px;
  11. }
  12. .yy_box_bg::before {
  13.   content'';
  14.   displayblock;
  15.   width: 0;
  16.   height: 0;
  17.   border-top5px solid transparent;
  18.   border-right10px solid #9eea6a;
  19.   border-bottom5px solid transparent;
  20.   positionrelative;
  21.   left: -10px;
  22.   top10px;
  23. }
  24. .yy_box_icon {
  25.   width: 11.5px;
  26.   height: 14.5px;
  27.   backgroundurl(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;
  28.   background-size: 11.5px 43.5px;
  29.   background-position: 0 -29px/* 默认第三张 */
  30.   positionrelative;
  31.   left15px;
  32.   top: -2px;
  33. }
  34. .audio-animation {
  35.   animation: voiceplay 2s infinite step-start;
  36. }
  37. @keyframes voiceplay{
  38.   0%, 100%{
  39.     background-position: 0 -29px;
  40.   }
  41.   33.333%{
  42.     background-position: 0 0;
  43.   }
  44.   66.666%{
  45.     background-position: 0 -14.5px;
  46.   }
  47. }
  48. .yy_box text {
  49.   color#999;
  50. }

 

js代码:

  1. data: {
  2.     recorderTempFilePath:''// 录音地址
  3.     playDuration: ''// 播放时间
  4.     onPlay:false// 播放状态样式判断
  5.     voice: false// 预览语音显示
  6.   },
  7. // 按住录音
  8.   recorderS:function(){
  9.     const options = {
  10.       duration: 600000,
  11.       sampleRate: 44100,
  12.       numberOfChannels: 1,
  13.       encodeBitRate: 192000,
  14.       format: 'mp3',
  15.       frameSize: 50
  16.     }
  17.     // 开始录音
  18.     recorderManager.start(options);
  19.     recorderManager.onStart(() => {
  20.       // console.log('recorder start')
  21.       wx.showLoading({
  22.         title: '录音中...',
  23.       })
  24.     })
  25.     //错误回调
  26.     recorderManager.onError((res) => {
  27.       console.log(res);
  28.       wx.hideLoading();
  29.       wx.showToast({
  30.         title: res,
  31.         icon: 'success',
  32.         duration: 1000
  33.       })
  34.     })
  35.   },
  36.   // 录音结束
  37.   recorderE:function(){
  38.     let that = this;
  39.     // 结束录音
  40.     recorderManager.stop();
  41.     recorderManager.onStop((res) => {
  42.       wx.hideLoading();
  43.       wx.showToast({
  44.         title: '录音结束',
  45.         icon: 'success',
  46.         duration: 1000
  47.       })
  48.       // console.log('recorder stop', res)
  49.       const { tempFilePath, duration } = res
  50.       let recorderTempFilePath = tempFilePath;
  51.       let playDuration = Math.ceil(duration / 1000);
  52.       that.setData({
  53.         recorderTempFilePath: recorderTempFilePath,
  54.         playDuration: playDuration,
  55.         voice: true
  56.       })
  57.     })
  58.   },
  59.   // 播放录音
  60.   play:function(){
  61.     let that = this;
  62.     let recorderTempFilePath = that.data.recorderTempFilePath;
  63.     innerAudioContext.autoplay = true
  64.     innerAudioContext.src = recorderTempFilePath
  65.     innerAudioContext.onPlay(() => {
  66.       // console.log('开始播放')
  67.       that.setData({
  68.         onPlay:true
  69.       })
  70.     })
  71.     innerAudioContext.onError((res) => {
  72.       // console.log(res.errMsg)
  73.       // console.log(res.errCode)
  74.       wx.showToast({
  75.         title: res.errMsg,
  76.         icon: 'success',
  77.         duration: 2000
  78.       })
  79.     })
  80.     // 播放结束
  81.     innerAudioContext.onEnded((res)=>{
  82.       that.setData({
  83.         onPlay: false
  84.       })
  85.     })
  86.   },
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情