微信小程序錄音與播放錄音功能實現

微信小程序錄音與播放錄音功能實現，話不多說直接上代碼實例：

test.wxml

<button bindtap='start'>開始錄音</button>  
<button bindtap='play'>播放錄音</button>  
<button bindtap='stop'>停止錄音</button>

test.js

var voice = "";
Page({
  play: function () {
    //播放聲音文件  
    wx.playVoice({
      filePath: voice
    })
  },
  start: function () {
    //開始錄音  
    wx.startRecord({
      success: function (e) {
        voice = e.tempFilePath
      }
    })
  },
  stop: function () {
    //結束錄音  
    wx.stopRecord();
  }
})

微信小程序錄音與播放錄音功能前端界面：

微信小程序錄音與播放錄音功能實現

pick一下最終效果，然後一步一步來。先把界面效果做出來。

微信小程序錄音與播放錄音功能：

1. 長按會隨動畫出現邊上半透明的圈，鬆開會縮回去。
2. 頂部progressBar長按時出現，然後隨錄音時長變短。

這是界面功能，我們先搞一下。

wxml：

<view class="head">
  <progress strokeWidth="4" percent="{{value}}" wx:if="{{showPg}}" ></progress>
  <view class="dot {{isTouchStart==true?'dot-blowup':''}} {{isTouchEnd==true?'dot-zoomout':''}}" style="display:{{isDot}}"></view>
  <view class="record" bindtouchstart="recordStart" bindtouchend="recordTerm">
    <image mode="widthFix" src="../../images/record.png"></image>
  </view>
</view>

wxss樣式：

.head {
  width: 100%;
  height: 400rpx;
  position: relative;
  
}
.head ,page{
  background-color: #f7f7f7;
}
.record, .dot {
  height: 200rpx;
  width: 200rpx;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-iteration-count: 1;
}

.record {
  background: rgba(92, 212, 76);
  z-index: 10;
}

.dot {
  background: rgba(92, 212, 76, 0.7);
  z-index: 9;
}

.dot-blowup {
  animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-fill-mode: forwards;
}

.dot-zoomout {
  animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-fill-mode: forwards;
}

@keyframes sploosh2 {
  0% {
    box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
    background: rgba(92, 212, 76, 0.7);
  }

  100% {
    box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
    background: rgba(92, 212, 76, 0.3);
  }
}

@keyframes sploosh3 {
  0% {
     box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
    background: rgba(92, 212, 76, 0.3);
  }

  100%{
    box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
    background: rgba(92, 212, 76, 0.7);
  }
}

.record image {
  height: 90rpx;
  width: 90rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  background: transparent;
  transform: translate(-50%, -50%);
}

js賦值：

var app = getApp(),
  rm = wx.getRecorderManager();
  //錄音停止時調用
rm.onStop(function(e) {
    var a = this;
    wx.showLoading({
      title: "正在識別..."
    });
  
    //上傳邏輯
    var n = {
      url: app.globalData.url + "upload",
      filePath: e.tempFilePath,
      name: "music",
      header: {
        "Content-Type": "application/json"
      },
      success: function (res) {
        
       }
      };
      wx.uploadFile(n);
  }),
  Page({

    /**
     * 頁面的初始數據
     */
    data: {
      hasRecord: false,
      isDot: "block",
      isTouchStart: false,
      isTouchEnd: false,
      value: '100',
      touchStart:0,
      touchEnd:0,
      vd:''
    },

    /**
     * 生命週期函數--監聽頁面加載
     */
    onLoad: function(options) {
      var a = this;
      wx.authorize({
        scope: "scope.record",
        success: function() {
          console.log("錄音授權成功");
        },
        fail: function() {
          console.log("錄音授權失敗");
        }
      }), a.onShow()

    },
    // 點擊錄音按鈕
    onRecordClick: function () {
      wx.getSetting({
        success: function (t) {
          console.log(t.authSetting), t.authSetting["scope.record"] ? console.log("已授權錄音") : (console.log("未授權錄音"),
            wx.openSetting({
              success: function (t) {
                console.log(t.authSetting);
              }
            }));
        }
      });
    },
    /**
     * 長按錄音開始
     */
    recordStart: function(e) {
      var n = this;
      rm.start({
        format: "mp3",
        sampleRate: 32e3,
        encodeBitRate: 192e3
      }), n.setData({
        touchStart: e.timeStamp,
        isTouchStart: true,
        isTouchEnd: false,
        showPg: true,
      })
      var a = 15, o = 10;
      this.timer = setInterval(function () {
        n.setData({
          value: n.data.value - 100 / 1500
        }), (o += 10) >= 1e3 && o % 1e3 == 0 && (a-- , console.log(a), a <= 0 && (rm.stop(),
          clearInterval(n.timer), n.animation2.scale(1, 1).step(), n.setData({
            animationData: n.animation2.export(),
          showPg: false,
          })));
      }, 10);
    },
    /**
     * 長按錄音結束
     */
    recordTerm: function(e) {
      rm.stop(), this.setData({
        isTouchEnd: true,
        isTouchStart: false,
        touchEnd: e.timeStamp,
        showPg: false,
        value: 100
      }), clearInterval(this.timer);
    }
  })

這裏我的錄音按鈕點擊擴散效果用的是純css實現，而上方progress是使用animation實現的。

參考自：必學智庫

在開發微信小程序遇到資源類無法顯示的問題：找了很多資料，特記錄備用。

1. 真機測試不能顯示圖片問題

原因：微信小程序的圖片資源必須是base64和網絡圖片格式。
解決方案：js中，對本地圖片進行轉碼，或者直接將url換爲image根目錄。

參考資料：http//:wangzhan.jiaxiangz.com