微信小程序錄音實現(xiàn)功能并上傳(使用node解析接收)
背景
我在開發(fā)小程序的時候,有需求要實現(xiàn)錄音功能,并能上傳給服務(wù)器。小程序錄音功能我是使用的微信的wx.getRecorderManager()實現(xiàn)的,通過該方法創(chuàng)建實例,實例錄音得到的文件是本地臨時文件,上傳文件需要使用微信的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) {
// 監(jiān)聽錄音開始事件
recorderManager.onStart(() => {
console.log('recorder start')
})
// 監(jiān)聽已錄制完指定幀大小的文件事件。如果設(shè)置了 frameSize,則會回調(diào)此事件。
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res
console.log('frameBuffer.byteLength', frameBuffer.byteLength)
})
//錄音的參數(shù)
const options = {
duration: 60000, //錄音時間,默認(rèn)是60s,提前松手會觸發(fā)button的bindtouchend事件,執(zhí)行停止函數(shù)并上傳錄音文件。超過60s不松手會如何并未測試過
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3', //錄音格式,這里是mp3
frameSize: 50 //指定幀大小,單位 KB。傳入 frameSize 后,每錄制指定幀大小的內(nèi)容后,會回調(diào)錄制的文件內(nèi)容,不指定則不會回調(diào)。暫僅支持 mp3 格式。
}
//開始錄音
recorderManager.start(options);
},
//停止錄音并上傳數(shù)據(jù)
endRecord:function(e) {
const self = this;
//停止錄音
recorderManager.stop();
//監(jiān)聽錄音停止事件,執(zhí)行上傳錄音文件函數(shù)
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', //填寫自己服務(wù)器的地址。
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('期望上傳的總字節(jié)數(shù):' + e.totalBytesExpectedToSend);
console.log('已經(jīng)上傳的字節(jié)數(shù)' + e.totalBytesSent);
})
})
}
})
到這里,小程序部分的代碼就已經(jīng)完成了。
node服務(wù)器端
前提:
node服務(wù)器我是用的是 express 框架,如果有不會的朋友,可以先簡單了解一下express。
要后端能解析用戶上傳的文件,需要合適的中間件。可以參考文章末尾的講解nodejs使用connect-multiparty實現(xiàn)文件上傳(文件接收)后端。
首先項目需要安裝 express 和 connect-multiparty
npm install express npm install connnect-multiyparty
大家學(xué)node的,上面兩句不應(yīng)該看不懂。我不加 --save 是因為新版的node和npm不需要加就會給你保存在package.json文件內(nèi)。
//這是我的路由文件的代碼片段,監(jiān)聽端口號3000等設(shè)置在我的另一個文件內(nèi)。
//這只是代碼片段,大概率跑不起來,只起一個demo的作用。如果需要完整的代碼,可以留言給我。
const express = require('express');
const multiparty = require('connect-multiparty');
var router = express.Router();
var multipartMiddleware = multiparty();
router.use(multiparty({uploadDir:'./temp'})); //將接收文件的地址更改為當(dāng)前目錄下的temp文件夾。如果沒有,則需要新建該文件夾。
// 處理錄音文件
//只需要這樣處理,上傳的MP3文件就會保存在指定的目錄下了。
router.post('/record', multipartMiddleware, (request, response) => {
console.log('received a request');
console.log(request.files);
request.on('end', () => {
response.send('通信完成');
})
})
鄭重提示:保存下來的是臨時文件,短時間內(nèi)就會自動刪除,所以大家需要及時處理文件,比如寫入到新文件中
這個框架已經(jīng)兩年沒更新了,所以這個框架這不一定是好的,但是是可行的
下面看下nodejs使用connect-multiparty實現(xiàn)文件上傳(文件接收)后端
文件上傳
文件上傳是服務(wù)器經(jīng)常會用到的一項功能。做了幾次文件上傳功能,發(fā)現(xiàn)文件接收后端還是沒那么容易。嘗試過不同的中間件,折騰來折騰去,發(fā)現(xiàn)connect-multiparty用起來比較簡單,適配nodejs版本v0.12.11。
用法
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
app.post('/upload', multipartMiddleware, function(req, resp) {
console.log(req.body, req.files);
// don't forget to delete all req.files when done
});
前端用multipart/form-data的形式上傳數(shù)據(jù),后端通過中間件connect-multipary接收。
注意,接收結(jié)果req.files是一個對象,包含POST上傳的參數(shù)和一個臨時文件,文件一般在/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) { });
參考
總結(jié)
到此這篇關(guān)于微信小程序錄音實現(xiàn)功能并上傳(使用node解析接收)的文章就介紹到這了,更多相關(guān)微信小程序錄音上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 循環(huán)調(diào)用示例介紹
循環(huán)調(diào)用,如果已經(jīng)獲取到了結(jié)果,則退出循環(huán),下面有個不錯的示例,感興趣的朋友可以嘗試操作下2013-11-11
js 右側(cè)浮動層效果實現(xiàn)代碼(跟隨滾動)
因為項目上有這樣的需求,在網(wǎng)上也查了些東西,之前是想找個差不多類似的套用一下。后來發(fā)覺沒有合適的,因時間緊迫就自己動手寫了一個簡單的 ,示例代碼如下 兼容火狐和IE7+2015-11-11
使用bootstrap莫名其妙出現(xiàn)橫向滾動條的問題及解決
這篇文章主要介紹了使用bootstrap莫名其妙出現(xiàn)橫向滾動條的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-11-11
JS實現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動色塊的方法
這篇文章主要介紹了JS實現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動色塊的方法,涉及javascript操作html元素及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
JavaScript實現(xiàn)簡潔的俄羅斯方塊完整實例
這篇文章主要介紹了JavaScript實現(xiàn)簡潔的俄羅斯方塊,以完整實例形式分析了JavaScript實現(xiàn)俄羅斯方塊游戲的具體技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2016-03-03
一文教你如何像導(dǎo)入JS模塊一樣導(dǎo)入CSS
HTML中通過使用css可以讓網(wǎng)頁的美觀效果更進(jìn)一步,下面這篇文章主要給大家介紹了如何像導(dǎo)入JS模塊一樣導(dǎo)入CSS的相關(guān)資料,文中給出了詳細(xì)的實例代碼,需要的朋友可以參考下2021-09-09

