小程序录音功能实现

前言

在开发小程序过程中，有一个实现录音功能并播放录音，将录音上传至服务器的需求。开发过程中使用了taro框架，录音功能通过taro.getrecordermanager()接口实现，上传录音至服务器通过taro.uploadfile接口实现，播放录音使用taro.createinneraudiocontext()接口实现。下面就详细介绍整个流程是如何实现的。

小程序录音

首先获取录音管理器模块：

const recordermanager = taro.getrecordermanager();

在组件挂载完毕时注册录音监听事件：

useeffect(() => {
 // 监听录音开始
  recordermanager.onstart(() => {
   console.log('开始录音');
  });
 // 监听录音暂停
  recordermanager.onpause(() => {
   console.log('暂停录音');
  });
 // 监听录音继续
  recordermanager.onresume(() => {
   console.log('继续录音');
  });
 // 监听录音停止
  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的回调函数中，我们可以获取到录音的临时地址res.tempfilepath，但这个地址是有有效期限的，所以我们需要将这个录音上传至服务器后台，进行保存，后续才能正常使用。

onstop回调函数中我们调用了fileupload函数实现文件上传，fileupload函数的实现如下：

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就会触发开始录音，之后会通过当前状态判断是暂停录音还是继续录音。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(); // 继续录音
   }
  }
 };

 const handlecomplete = () => {
  recordermanager.stop(); // 停止录音
 };

后台实现录音存储并返回录音地址

网上大多数博客都没有涉及这块内容，下面就介绍一下如何实现，后台框架我用的是阿里的egg.js。

文件上传需要配置的东西可见官方文档：。我们这里使用它的第一种file模式来实现。

因为egg.js框架内置了multipart插件，可以解析上传的multipart/form-data类型的数据。

首先，现在配置文件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文件写入如下内容：
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写入具体实现：

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;

  // 将用户信息记录到数据库中
  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;

这里需要注意的是：

• 需要注册阿里云账号，并在对象存储那里新建一个存储桶用于存放音频，也就是云存储的实现。
• 需要安装ali-ossnpm包，用于连接阿里云对象存储。在后台接收到前端上传的临时文件后，就会将音频上传至阿里云对象存储中（client.put）。

播放录音

细心的小伙伴可以注意到在使用taro.uploadfile接口上传录音后，在success回调中调用了playaudio函数用于播放音频，接下来讲一下播放音频是如何实现的。

首先，使用taro.createinneraudiocontext获取audio的上下文对象：

const inneraudiotext = taro.createinneraudiocontext();

和录音一样，在组件挂载完成时，注册监听事件：

useeffect(() => {
  inneraudiotext.onplay(() => {
   console.log('开始播放');
  });

  inneraudiotext.onerror((e) => {
   console.log('播放异常');
   console.log(e);
  });
 }, []);

在录音文件上传成功后，调用playaudio方法用于播放录音：

const playaudio = (url) => {
 inneraudiotext.autoplay = true;
 inneraudiotext.src = url;
};

在src被赋予值的时候，录音就会开始播放。

总结

到此这篇关于小程序录音功能实现的文章就介绍到这了,更多相关小程序 录音内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！