用戶(hù)長(zhǎng)按錄音，松手后直接結(jié)束錄音，結(jié)束錄音后，用戶(hù)可以選擇重新錄音、播放剛才的錄音，上傳錄音（這里的上傳錄音指上傳到自己服務(wù)器，上傳步驟是，前端調(diào)用wx.uploadVoice，后臺(tái)再到微信服務(wù)器下載音頻文件，上傳到自己的服務(wù)器）。注意，音頻文件自上傳時(shí)間算起在微信服務(wù)器的有效期為3天。由于后臺(tái)從微信服務(wù)器下載的音頻文件是amr格式的，需要后臺(tái)先把a(bǔ)mr文件轉(zhuǎn)換成MP3，前端用audio播放。我們公司是購(gòu)買(mǎi)阿里云的媒體處理服務(wù)進(jìn)行文件轉(zhuǎn)碼的。

// 開(kāi)始錄音接口
wx.startRecord();

// 停止錄音接口
wx.stopRecord({
success: function (res) {
    var localId = res.localId;
  }
});

// 監(jiān)聽(tīng)錄音自動(dòng)停止接口
wx.onVoiceRecordEnd({
  // 錄音時(shí)間超過(guò)一分鐘沒(méi)有停止的時(shí)候會(huì)執(zhí)行 complete 回調(diào)
  complete: function (res) {
    var localId = res.localId;
  }
});

// 播放語(yǔ)音接口
wx.playVoice({
  localId: "" // 需要播放的音頻的本地ID，由stopRecord接口獲得
});

// 暫停播放接口
wx.pauseVoice({
  localId: "" // 需要暫停的音頻的本地ID，由stopRecord接口獲得
});

// 監(jiān)聽(tīng)語(yǔ)音播放完畢接口
wx.onVoicePlayEnd({wx.onVoice
  success: function (res) {
    var localId = res.localId; // 返回音頻的本地ID
  }
});

// 上傳語(yǔ)音接口
wx.uploadVoice({
  localId: "", // 需要上傳的音頻的本地ID，由stopRecord接口獲得
  isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
  success: function (res) {
    var serverId = res.serverId; // 返回音頻的服務(wù)器端ID
  }
});

//項(xiàng)目用到的框架：vue.js
@touchstart // 手指觸碰屏幕，開(kāi)始長(zhǎng)按
@touchend //手指離開(kāi)屏幕，結(jié)束長(zhǎng)按
@touchmove //手指在屏幕上滑動(dòng)

說(shuō)明：項(xiàng)目用到的框架：Vue
1.引入微信jssdk,做好微信配置

2.HTML結(jié)構(gòu)：

touchstart事件：MDN的定義是：當(dāng)觸點(diǎn)與觸控設(shè)備表面接觸時(shí)觸發(fā)touchstart 事件，換句話(huà)來(lái)說(shuō)，就是手指觸碰屏幕時(shí)觸發(fā)，所以這里監(jiān)聽(tīng)開(kāi)始長(zhǎng)按。

@touchend事件：當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)，這里今天長(zhǎng)按結(jié)束。

@touchmove事件：當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)。在這個(gè)長(zhǎng)按錄音的場(chǎng)景中，當(dāng)手指在屏幕上移動(dòng)了，也視為錄音結(jié)束，所以要監(jiān)聽(tīng)手指在屏幕上滑動(dòng)。

3.js代碼

methods:{
  gtouchstart(){
    // 當(dāng)用戶(hù)長(zhǎng)按500ms以上再真正開(kāi)始錄音
    setTimeout(() => {
      this.longPress()
    }, 500)}
  },
  longPress(){
    wx.startRecord() // 微信開(kāi)始錄音接口
  },
  gtouchmove(){
    wx.stopRecord({ // 微信結(jié)束錄音接口
      success: res => {
        this.localId = res.localId;
        console.log("中斷結(jié)束錄音")
      }
    })
  },
  gtouchend(){
     wx.stopRecord({ // 微信結(jié)束錄音接口
       success: res => {
         this.localId = res.localId;
         console.log("正常結(jié)束錄音成功了")
       }
    })
  },
  wxUpload() { // 上傳到微信服務(wù)器
    wx.uploadVoice({
      localId: this.localId, // 需要上傳的音頻的本地ID，由stopRecord接口獲得
      isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
      success: res => {
        this.serverId = res.serverId; // 返回音頻的服務(wù)器端ID
      }
    });
  },
}

大致過(guò)程如上面代碼所示：

在某個(gè)html元素監(jiān)聽(tīng)開(kāi)始長(zhǎng)按事件、結(jié)束長(zhǎng)按事件、在屏幕上移動(dòng)事件；

長(zhǎng)按事件開(kāi)始，這時(shí)調(diào)用微信接口wx.startRecord開(kāi)始錄音;

長(zhǎng)按事件結(jié)束，這時(shí)調(diào)用微信接口wx.stopRecord結(jié)束錄音，得到音頻的localId;

當(dāng)用戶(hù)在長(zhǎng)按過(guò)程中手指移動(dòng)了，也調(diào)用wx.stopRecord結(jié)束錄音;

錄音結(jié)束后，調(diào)用微信接口wx.uploadVoice把音頻上傳到微信服務(wù)器。

1.調(diào)用微信錄音超過(guò)60秒時(shí)，微信會(huì)自動(dòng)結(jié)束錄音并且返回一個(gè)localId，并且這個(gè)localId是無(wú)效的
解決方案：
在 wx.startRecord() 開(kāi)始之前添加定時(shí)器，如果錄音時(shí)間到達(dá)59秒，執(zhí)行wx.stopRecord主動(dòng)停止錄音，避免用戶(hù)錄音時(shí)間過(guò)長(zhǎng)導(dǎo)致錄音無(wú)效。
2.微信錄音功能授權(quán)引發(fā)的交互問(wèn)題
使用微信jssdk接口錄音，在同一個(gè)域只需要授權(quán)一次，即第一次使用錄音的時(shí)候，微信自己會(huì)彈出對(duì)話(huà)框詢(xún)問(wèn)是否允許錄音，用戶(hù)點(diǎn)擊允許后，之后再使用錄音時(shí)，便不會(huì)再咨詢(xún)用戶(hù)是否允許。
在第一次按住錄音后，由于用戶(hù)未曾允許錄音，微信會(huì)提示用戶(hù)授權(quán)允許在本頁(yè)面使用微信錄音功能，這時(shí)用戶(hù)會(huì)放開(kāi)錄音按鈕轉(zhuǎn)而去點(diǎn)擊允許，在用戶(hù)允許后，才真正會(huì)開(kāi)始錄音，而此時(shí)用戶(hù)早已放開(kāi)錄音按鈕，那么錄音按鈕上便不會(huì)再有touchend事件，錄音便會(huì)一直進(jìn)行。
解決策略：使用localStorage記錄用戶(hù)是否曾授權(quán)，并以此來(lái)判斷是否需要在剛進(jìn)入頁(yè)面是自動(dòng)錄一段錄音來(lái)觸發(fā)用戶(hù)授權(quán)

if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== "true"){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = "true";
            wx.stopRecord();
        },
        cancel: function () {
            alert("用戶(hù)拒絕授權(quán)錄音");
        }
    });
}

3.在ios下不能自動(dòng)播放audio的問(wèn)題
關(guān)于音頻的播放，為了頁(yè)面美觀，處理方式是隱藏audio的播放控件，然后給一個(gè)按鈕添加時(shí)間，通過(guò)audio.play()來(lái)控制音頻的播放的。但是在ios下有個(gè)問(wèn)題，audio.play()是不能直接播放音頻的，只能顯式地通過(guò)操作音頻的播放控件來(lái)。這是因?yàn)閕OS Safari 不允許自動(dòng)播放 audio，只能通過(guò)用戶(hù)交互觸發(fā)。這大概是蘋(píng)果公司出于用戶(hù)體驗(yàn)而做的限制。
解決方案：

// 在頁(yè)面初始化成功后，在wx.ready的回調(diào)函數(shù)內(nèi)，收到執(zhí)行下面的方法，這樣ios用戶(hù)在點(diǎn)擊播放按鈕時(shí)就能正常播放音頻
wx.ready(() => {
  this.$nextTick(() => {
    this.$refs.audio.load()
    this.$refs.audio.play()
    this.$refs.audio.pause();
  })
})

4.終極問(wèn)題：某些手機(jī)屏幕不靈敏導(dǎo)致長(zhǎng)按錄音出現(xiàn)各種各樣的問(wèn)題
描述：在初次完成長(zhǎng)按錄音的功能后，我在公司多臺(tái)貼了膜或者屏幕摔爛的手機(jī)測(cè)試發(fā)現(xiàn)，這些手機(jī)長(zhǎng)按、和取消長(zhǎng)按的事件相當(dāng)不靈敏，誤差很大，有時(shí)莫名其秒地結(jié)束錄音，體驗(yàn)非常差。
解決方案：我們和產(chǎn)品經(jīng)過(guò)商量，擺出這個(gè)避免不了的問(wèn)題，最終把長(zhǎng)按錄音的交互模式改成了點(diǎn)擊錄音。

最后，參考鏈接：http://www.cnblogs.com/liujun...