怎么在小程序中實(shí)現(xiàn)一個(gè)錄音功能

本篇文章為大家展示了怎么在小程序中實(shí)現(xiàn)一個(gè)錄音功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

首先獲取錄音管理器模塊：

const recorderManager = Taro.getRecorderManager();

在組件掛載完畢時(shí)注冊(cè)錄音監(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: '錄音時(shí)間太短',
     duration: 1000,
     icon: 'none',
    });
   } else {
    console.log('停止錄音');
    fileUpload(res.tempFilePath);
   }
  });

  recorderManager.onError(() => {
   Taro.showToast({
    title: '錄音失??！',
    duration: 1000,
    icon: 'none',
   });
  });
 }, []);

在錄音onStop的回調(diào)函數(shù)中，我們可以獲取到錄音的臨時(shí)地址res.tempFilePath，但這個(gè)地址是有有效期限的，所以我們需要將這個(gè)錄音上傳至服務(wù)器后臺(tái)，進(jìn)行保存，后續(xù)才能正常使用。

onStop回調(diào)函數(shù)中我們調(diào)用了fileUpload函數(shù)實(shí)現(xiàn)文件上傳，fileUpload函數(shù)的實(shí)現(xiàn)如下：

const fileUpload = (tempFilePath) => {
  Taro.uploadFile({
   url: 'http://127.0.0.1:7001/record', // 服務(wù)器地址
   filePath: tempFilePath,
   name: 'file', // 這個(gè)隨便填
   header: {
    'content-type': 'multipart/form-data', // 格式必須是這個(gè)
    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);
   },
  });
 };

需要注意的點(diǎn)是：header中的content-type必須是multipart/form-data。

錄音事件的處理

第一次點(diǎn)擊handleClick就會(huì)觸發(fā)開始錄音，之后會(huì)通過(guò)當(dāng)前狀態(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(); // 停止錄音
 };

后臺(tái)實(shí)現(xiàn)錄音存儲(chǔ)并返回錄音地址

網(wǎng)上大多數(shù)博客都沒有涉及這塊內(nèi)容，下面就介紹一下如何實(shí)現(xiàn)，后臺(tái)框架我用的是阿里的egg.js。

文件上傳需要配置的東西可見官方文檔：egg.js文件上傳。我們這里使用它的第一種File模式來(lái)實(shí)現(xiàn)。

因?yàn)閑gg.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寫入具體實(shí)現(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 {
   // 需要?jiǎng)h除臨時(shí)文件
   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ù)庫(kù)中
  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;

這里需要注意的是：

• 需要注冊(cè)阿里云賬號(hào)，并在對(duì)象存儲(chǔ)那里新建一個(gè)存儲(chǔ)桶用于存放音頻，也就是云存儲(chǔ)的實(shí)現(xiàn)。

• 需要安裝ali-ossnpm包，用于連接阿里云對(duì)象存儲(chǔ)。在后臺(tái)接收到前端上傳的臨時(shí)文件后，就會(huì)將音頻上傳至阿里云對(duì)象存儲(chǔ)中（client.put）。

播放錄音

細(xì)心的小伙伴可以注意到在使用Taro.uploadFile接口上傳錄音后，在success回調(diào)中調(diào)用了playAudio函數(shù)用于播放音頻，接下來(lái)講一下播放音頻是如何實(shí)現(xiàn)的。

首先，使用Taro.createInnerAudioContext獲取audio的上下文對(duì)象：

const innerAudioText = Taro.createInnerAudioContext();

和錄音一樣，在組件掛載完成時(shí)，注冊(cè)監(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被賦予值的時(shí)候，錄音就會(huì)開始播放。

上述內(nèi)容就是怎么在小程序中實(shí)現(xiàn)一個(gè)錄音功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。