微信小程序录音,播放的实现

今天给自己定下了一个目标,想着根据微信小程序官方的API,针对单独的小功能写一个小demo。 今天准备写的是关于录音这一块:wx.getRecorderManager 接口

官方提示

1.首先使用方法获取对象

const recorderManager = wx.getRecorderManager()
const innerAudioContext = wx.createInnerAudioContext()

2.开始录音

//开始录音的时候
  start: function () {

    const options = {
      duration: 10000,//指定录音的时长,单位 ms
      sampleRate: 16000,//采样率
      numberOfChannels: 1,//录音通道数
      encodeBitRate: 96000,//编码码率
      format: 'mp3',//音频格式,有效值 aac/mp3
      frameSize: 50,//指定帧大小,单位 KB
    }
    //开始录音
    recorderManager.start(options);
    recorderManager.onStart(() => {
      console.log('recorder start')
    });
    //错误回调
    recorderManager.onError((res) => {
      console.log(res);
    })
  },

3.停止录音

//停止录音
  stop: function () {
    recorderManager.stop();
    recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath;
      console.log('停止录音', res.tempFilePath)
      const { tempFilePath } = res
    })
  },

4.播放录音

//播放声音
  play: function () {
    innerAudioContext.autoplay = true
    innerAudioContext.src = this.tempFilePath,
    innerAudioContext.onPlay(() => {
      console.log('开始播放')
    })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },

wxml中代码:

<button bindtap="start" class='btn'>开始录音</button>
<button bindtap="stop" class='btn'>停止录音</button>
<button bindtap="play" class='btn'>播放录音</button>

wxss中代码:

.btn{
  margin-top: 10rpx;
}

我会上传详细实用的demo。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

spring boot 添加拦截器

构建一个spring boot项目。 添加拦截器需要添加一个configuration @Configuration @ComponentScan(basePa...

4008
来自专栏女程序员的日常

STM8S——Analog/digital converter (ADC)

1、ADC1 and ADC2 are 10-bit successive approximation Anolog to Digital Converters...

3021
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–交货与库存调拨(134)-5发货

4.5 VL10B采购订单的交货到期清单 该活动创建库存调拨订单的交货。 角色:仓库文员 后勤 -后勤执行-外向处理- 外向交货的发货 -外向交货 -创建-交货...

3515
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–含客户预付款的销售订单处理(201)-5发货

VL10C交货处理 在此活动中,创建交货。 后勤 ®后勤执行 ® 外向处理 ® 外向交货的发货 ® 外向交货 ® 创建 ® 交货凭证到期日的集中处理 ®销售订单...

3096
来自专栏运维前线

umount: /var: device is busy

去掉挂载显示device is busy 出现此问题是当前挂载点上面有进程存在 [root@zabbix ~]# umount /dev/mapper/v...

2199
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–潜在客户销售订单处理(113)-3发货、发票

VL10C交货到期清单 在本活动中,处理交货到期清单,以便创建交货凭证。 角色仓库文员 后勤 →后勤执行→外向处理→外向交货的发货→外向交货→创建→交货凭证到期...

3657
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第6章 示波器设计—双通道ADC驱动

本章节为大家讲解示波器的ADC驱动,采用STM32自带ADC实现。关于STM32F429的ADC,可以说处处有地雷,不小心就踩上了,如果简单的使用,不会发现,复...

1294
来自专栏SAP最佳业务实践

SAP最佳业务实践:SD–按计划协议的销售(231)-3发货

一、VL10E交货到期清单 在此活动中,可以处理交货到期清单,以便创建交货凭证。 角色仓库文员 后勤 → 后勤执行 → 外向处理→外向交货的发货→ 外向交货→ ...

4696
来自专栏Aloys的开发之路

org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts2.dispatcher.

使用Eclipse启动Maven+Struts项目报错,报错日志如下: 2016-08-31 22:00:47 INFO ContextLoader:325 ...

2365
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

6797

扫码关注云+社区