小程序錄音功能實現(xiàn)
前言
在開發(fā)小程序過程中，有一個實現(xiàn)錄音功能并播放錄音，將錄音上傳至服務器的需求。開發(fā)過程中使用了Taro框架，錄音功能通過Taro.getRecorderManager()接口實現(xiàn)，上傳錄音至服務器通過Taro.uploadFile接口實現(xiàn)，播放錄音使用Taro.createInnerAudioContext()接口實現(xiàn)。下面就詳細介紹整個流程是如何實現(xiàn)的。
小程序錄音
首先獲取錄音管理器模塊：
const recorderManager = Taro.getRecorderManager();
在組件掛載完畢時注冊錄音監(jiān)聽事件：
useEffect(() => {
// 監(jiān)聽錄音開始
recorderManager.onStart(() => {
console.log('開始錄音');
});
// 監(jiān)聽錄音暫停
recorderManager.onPause(() => {
console.log('暫停錄音');
});
// 監(jiān)聽錄音繼續(xù)
recorderManager.onResume(() => {
console.log('繼續(xù)錄音');
});
// 監(jiān)聽錄音停止
recorderManager.onStop((res) => {
if (res.duration < 1000) {
Taro.showToast({
title: '錄音時間太短',
duration: 1000,
icon: 'none',
});
} else {
console.log('停止錄音');
fileUpload(res.tempFilePath);
}
});
recorderManager.onError(() => {
Taro.showToast({
title: '錄音失敗！',
duration: 1000,
icon: 'none',
});
});
}, []);
在錄音onStop的回調(diào)函數(shù)中，我們可以獲取到錄音的臨時地址res.tempFilePath，但這個地址是有有效期限的，所以我們需要將這個錄音上傳至服務器后臺，進行保存，后續(xù)才能正常使用。
onStop回調(diào)函數(shù)中我們調(diào)用了fileUpload函數(shù)實現(xiàn)文件上傳，fileUpload函數(shù)的實現(xiàn)如下：
const fileUpload = (tempFilePath) => {
Taro.uploadFile({
url: 'http://127.0.0.1:7001/record', // 服務器地址
filePath: tempFilePath,
name: 'file', // 這個隨便填
header: {
'content-type': 'multipart/form-data', // 格式必須是這個
Authorization: Taro.getStorageSync('token'),
},
// formData用于傳輸除文件以外的一些信息
formData: {
record_name: '朗誦作品',
poem_id: poemInfo.id,
category: poemInfo.category,
},
success: (res) => {
console.log(res);
const url = res.data;
playAudio(url); // 播放錄音
},
fail: (error) => {
console.log('failed!');
console.error(error);
},
});
};
需要注意的點是：header中的content-type必須是multipart/form-data。
錄音事件的處理
第一次點擊handleClick就會觸發(fā)開始錄音，之后會通過當前狀態(tài)判斷是暫停錄音還是繼續(xù)錄音。handleComplete用于停止錄音。
const handleClick = () => {
const curPause = pause;
setPause(!curPause);
if (firstRecord) {
setfirstRecord(false);
recorderManager.start({
duration: 60000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50,
});
Taro.showToast({
title: '開始錄音',
duration: 1000,
icon: 'none',
});
} else {
if (curPause) {
recorderManager.pause(); // 暫停錄音
} else {
recorderManager.resume(); // 繼續(xù)錄音
}
}
};
const handleComplete = () => {
recorderManager.stop(); // 停止錄音
};
后臺實現(xiàn)錄音存儲并返回錄音地址
網(wǎng)上大多數(shù)博客都沒有涉及這塊內(nèi)容，下面就介紹一下如何實現(xiàn)，后臺框架我用的是阿里的egg.js。
文件上傳需要配置的東西可見官方文檔：egg.js文件上傳。我們這里使用它的第一種File模式來實現(xiàn)。
因為egg.js框架內(nèi)置了Multipart插件，可以解析上傳的multipart/form-data類型的數(shù)據(jù)。
首先，現(xiàn)在配置文件config.default.js中寫入multipart配置：
module.exports = (app) => {
const config = (exports = {});
...
config.multipart = {
mode: 'file',
fileSize: '50mb',
}
...
return {
...config,
...userConfig,
};
};
然后，在router.js中定義路由：
// 提交錄音
router.post('/record', auth, controller.record.postRecord);
在controller目錄下定義record.js文件寫入如下內(nèi)容：
const Controller = require('egg').Controller;
class RecordController extends Controller {
async postRecord() {
const { ctx } = this;
const file = ctx.request.files[0];
const { record_name, poem_id, category } = ctx.request.body;
const res = await ctx.service.record.postRecord(file, record_name, poem_id, category);
ctx.body = res;
}
}
module.exports = RecordController;
在service目錄下定義record.js寫入具體實現(xiàn)：
const Service = require('egg').Service;
let OSS = require('ali-oss');
let aliInfo = {
// https://help.aliyun.com/document_detail/31837.html
region: 'oss-cn-guangzhou',
bucket: 'poem-mini-program',
accessKeyId: 'xxx', // 填入阿里云的accessKeyId
accessKeySecret: 'xxx', // 填入阿里云的accessKeySecret
};
let client = new OSS(aliInfo);
class RecordService extends Service {
async postRecord(file, record_name, poem_id, category) {
const url = await this.uploadOSS(file);
await this.updateRecord(url, record_name, poem_id, category);
return url;
}
async uploadOSS(file) {
const { ctx } = this;
let result;
try {
// 處理文件，比如上傳到云端
result = await client.put(file.filename, file.filepath);
} finally {
// 需要刪除臨時文件
await ctx.cleanupRequestFiles();
}
return result.url;
}
async updateRecord(url, record_name, poem_id, category) {
const { ctx } = this;
console.log('從ctx.locals中取openid');
console.log(ctx.locals.openid);
const openid = ctx.locals.openid;
// 將用戶信息記錄到數(shù)據(jù)庫中
const res = await ctx.model.Record.create({
record_name: record_name,
record_url: url,
poem_id: poem_id,
category: category,
openid: openid,
});
}
}
module.exports = RecordService;
這里需要注意的是：
- 需要注冊阿里云賬號，并在對象存儲那里新建一個存儲桶用于存放音頻，也就是云存儲的實現(xiàn)。
- 需要安裝ali-ossnpm包，用于連接阿里云對象存儲。在后臺接收到前端上傳的臨時文件后，就會將音頻上傳至阿里云對象存儲中（client.put）。
播放錄音
細心的小伙伴可以注意到在使用Taro.uploadFile接口上傳錄音后，在success回調(diào)中調(diào)用了playAudio函數(shù)用于播放音頻，接下來講一下播放音頻是如何實現(xiàn)的。
首先，使用Taro.createInnerAudioContext獲取audio的上下文對象：
const innerAudioText = Taro.createInnerAudioContext();
和錄音一樣，在組件掛載完成時，注冊監(jiān)聽事件：
useEffect(() => {
innerAudioText.onPlay(() => {
console.log('開始播放');
});
innerAudioText.onError((e) => {
console.log('播放異常');
console.log(e);
});
}, []);
在錄音文件上傳成功后，調(diào)用playAudio方法用于播放錄音：
const playAudio = (url) => {
innerAudioText.autoplay = true;
innerAudioText.src = url;
};
在src被賦予值的時候，錄音就會開始播放。
總結(jié)
到此這篇關(guān)于小程序錄音功能實現(xiàn)的文章就介紹到這了,更多相關(guān)小程序 錄音內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS手寫一個自定義Promise操作,結(jié)合實例形式分析了JS自定義Promise的實現(xiàn)與使用相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
日期范圍選擇器是一個常見的Web應用功能,它允許用戶選擇一個日期范圍,本文我們將使用JavaScript來實現(xiàn)這個功能,感興趣的小伙伴可以了解下2024-01-01
在昨天的工作中遇到了一個微信小程序上傳代碼過大的情況,在這里總結(jié)一下具體的解決步驟,首先介紹一下,技術(shù)棧是使用uniapp框架+HBuilderX的開發(fā)環(huán)境,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JavaScript詞法作用域的相關(guān)資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
傳統(tǒng)上，網(wǎng)頁中不會有大量的腳本，至少腳本很少會影響網(wǎng)頁的性能。2010-03-03
這篇文章主要介紹了js獲取圖片的base64編碼并壓縮，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
用了bootstrap模版搭建的網(wǎng)站，在IE7中打不開，在IE8中背景圖片都不顯示，內(nèi)容排列也出現(xiàn)問題，在IE9中表現(xiàn)的最好，在IE11中出現(xiàn)彈出層中的圖片無法顯示，那么這些兼容性怎么去解決2015-10-10
Javascript 實現(xiàn)廣告后加載 可加載百度谷歌聯(lián)盟廣告
本文主要介紹一種新的廣告后加載的方式，支持自定義HTML廣告、百度聯(lián)盟廣告和谷歌聯(lián)盟廣告。這種方式在頁面加載完成后執(zhí)行，不影響內(nèi)容的顯示，對用戶更加友好。2016-05-05
原生JS實現(xiàn)$.param() 函數(shù)的方法
這篇文章主要介紹了原生JS實現(xiàn)$.param() 函數(shù)的方法，由于遇到相關(guān)序列化的問題，但是vue項目中由于減少隊jquery引用的限制，導致不能用$.param來序列化參數(shù)，下面小編給大家分享了實例代碼，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了將中國標準時間轉(zhuǎn)換成標準格式的方法,需要的朋友可以參考下2014-03-03