背景

我在開發小程式的時候，有需求要實現錄音功能，並能上傳給伺服器。小程序錄音功能我是使用的微信的wx.getRecorderManager()實現的，通過該方法建立例項，例項錄音得到的檔案是本地臨時檔案，上傳檔案需要使用微信的wx.uploadFile(Object object)方法，這就是本次專案的背景。

小程式端

html頁面主要是第一個按鈕，兩個事件，長按開始錄音，鬆手停止錄音。第二個按鈕只是一個播放錄音的功能，用於確定錄音是否成功

<!--pages/record/record.wxml-->
<button bindtap="playVoice" type="primary" disabled="{{tempFilePath === ''}}">播放錄音</button>
<button type="warn" bindtouchstart="beginRecord" bindtouchend="endRecord">長按開始錄音，鬆手停止錄音</button>

js部分主要就是兩個事件

// pages/record/record.js
// 兩個例項宣告在Page之外，方便訪問
const recorderManager = wx.getRecorderManager() //這是錄音功能的例項，必須的
const innerAudioContext = wx.createInnerAudioContext(); //這是播放錄音功能需要的例項
Page({
 data: {
 tempFilePath: '' //存放錄音檔案的臨時路徑
 },// 播放錄音
 playVoice: function(e) {
 innerAudioContext.onPlay(() => {
 console.log('開始播放')
 })
 innerAudioContext.onError((res) => {
 console.log(res.errMsg)
 console.log(res.errCode)
 })
 innerAudioContext.play();
 },// 錄音
 beginRecord:function(e) {
 // 監聽錄音開始事件
 recorderManager.onStart(() => {
 console.log('recorder start')
 })
 // 監聽已錄製完指定幀大小的檔案事件。如果設定了 frameSize，則會回撥此事件。
 recorderManager.onFrameRecorded((res) => {
 const { frameBuffer } = res
 console.log('frameBuffer.byteLength',frameBuffer.byteLength)
 })
 //錄音的引數
 const options = {
 duration: 60000,//錄音時間，預設是60s，提前鬆手會觸發button的bindtouchend事件，執行停止函式並上傳錄音檔案。超過60s不鬆手會如何並未測試過
 sampleRate: 44100,numberOfChannels: 1,encodeBitRate: 192000,format: 'mp3',//錄音格式，這裡是mp3
 frameSize: 50 //指定幀大小，單位 KB。傳入 frameSize 後，每錄製指定幀大小的內容後，會回撥錄製的檔案內容，不指定則不會回撥。暫僅支援 mp3 格式。
 }
 //開始錄音
 recorderManager.start(options); 
 },//停止錄音並上傳資料
 endRecord:function(e) {
 const self = this;
 //停止錄音
 recorderManager.stop();
 //監聽錄音停止事件，執行上傳錄音檔案函式
 recorderManager.onStop((res) => {
 console.log('recorder stop',res)
 //返回值res.tempFilePath是錄音檔案的臨時路徑 (本地路徑) 
 self.setData({
 tempFilePath: res.tempFilePath
 })
 innerAudioContext.src = res.tempFilePath
 //上傳錄音檔案
 var uploadTask = wx.uploadFile({
 //沒有method，自動為POST請求
 filePath: res.tempFilePath,name: 'recordFile',//這個隨便填
 url: 'http://localhost:3000/record',//填寫自己伺服器的地址。
 header: {
 "Content-Type": "multipart/form-data" //必須是這個格式
 },success:(e) => {
 console.log('succeed!');
 console.log(e); 
 },fail: (e) => {
 console.log('failed!');
 console.log(e); 
 }
 });
 uploadTask.onProgressUpdate((e) => {
 console.log(e);
 console.log('期望上傳的總位元組數：' + e.totalBytesExpectedToSend);
 console.log('已經上傳的位元組數' + e.totalBytesSent); 
 })
 })
 }
})

到這裡，小程式部分的程式碼就已經完成了。

node伺服器端

前提：

node伺服器我是用的是 express 框架，如果有不會的朋友，可以先簡單瞭解一下express。
要後端能解析使用者上傳的檔案，需要合適的中介軟體。可以參考文章末尾的講解nodejs使用connect-multiparty實現檔案上傳(檔案接收)後端。
首先專案需要安裝 express 和 connect-multiparty

npm install express

npm install connnect-multiyparty

大家學node的，上面兩句不應該看不懂。我不加 --save 是因為新版的node和npm不需要加就會給你儲存在package.json檔案內。

//這是我的路由檔案的程式碼片段，監聽埠號3000等設定在我的另一個檔案內。
//這只是程式碼片段，大概率跑不起來，只起一個demo的作用。如果需要完整的程式碼，可以留言給我。

const express = require('express');
const multiparty = require('connect-multiparty');

var router = express.Router();
var multipartMiddleware = multiparty();
router.use(multiparty({uploadDir:'./temp'})); //將接收檔案的地址更改為當前目錄下的temp資料夾。如果沒有，則需要新建該資料夾。

// 處理錄音檔案
//只需要這樣處理，上傳的MP3檔案就會儲存在指定的目錄下了。
router.post('/record',multipartMiddleware,(request,response) => {
 console.log('received a request');
 console.log(request.files);
 request.on('end',() => {
 response.send('通訊完成');
 })
 
})

鄭重提示：儲存下來的是臨時檔案，短時間內就會自動刪除，所以大家需要及時處理檔案，比如寫入到新檔案中

這個框架已經兩年沒更新了，所以這個框架這不一定是好的，但是是可行的

下面看下nodejs使用connect-multiparty實現檔案上傳(檔案接收)後端

檔案上傳

檔案上傳是伺服器經常會用到的一項功能。做了幾次檔案上傳功能，發現檔案接收後端還是沒那麼容易。嘗試過不同的中介軟體，折騰來折騰去，發現connect-multiparty用起來比較簡單，適配nodejs版本v0.12.11。

用法

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
app.post('/upload',function(req,resp) {
 console.log(req.body,req.files);
 // don't forget to delete all req.files when done
});

前端用multipart/form-data的形式上傳資料，後端通過中介軟體connect-multipary接收。
注意，接收結果req.files是一個物件，包含POST上傳的引數和一個臨時檔案，檔案一般在/tmp目錄下，可以將檔案移動到指定位置。

var fs = require('fs');
var source = fs.createReadStream(path);
var dest = fs.createWriteStream(output);
source.pipe(dest);
source.on('end',function() { fs.unlinkSync(path);}); //delete
source.on('error',function(err) { });

參考

connect-multiparty

總結

到此這篇關於微信小程序錄音實現功能並上傳(使用node解析接收)的文章就介紹到這了,更多相關微信小程序錄音上傳內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！