微信小程序实现录音Record功能


Posted in Javascript onMay 09, 2021

本文实例为大家分享了微信小程序实现录音Record功能的具体代码,供大家参考,具体内容如下

布局

<!--pages/record/record.wxml-->
<view>
 <button 
  class="tui-menu-list"
  bindtap="startRecordAac" 
  type="primary">录音开始(aac)</button>
 <button 
  class="tui-menu-list"
  bindtap="startRecordMp3" 
  type="primary">录音开始(mp3)</button>
 <button 
  class="tui-menu-list" 
  bindtap="stopRecord" 
  type="primary">录音结束</button>
 <button 
  class="tui-menu-list"
  bindtap="playRecord" 
  type="primary">播放录音</button>
</view>

样式:

/* pages/record/record.wxss */
 
.tui-menu-list{
  flex-direction: row;
  margin: 20rpx;
  padding: 20rpx;
}

开始录音和停止录音

// pages/record/record.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
 
  },
 
  onLoad:function (options) {
    var that = this
    this.recorderManager = wx.getRecorderManager();
    this.recorderManager.onError(function () {
      that.tip("录音失败!");
    })
    this.recorderManager.onStop(function (res) {
      that.setData({
        src:res.tempFilePath
      })
      console.log(res.tempFilePath)
      that.tip("录音完成!")
    })
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.onError((res) =>{
      that.tip("播放录音失败!")
    })
  },
 
  //提示
  tip:function (msg) {
    wx.showModal({
      cancelColor: 'cancelColor',
      title:'提示',
      content:msg,
      showCancel:false
    })
  },
 
  //录制aac
  startRecordAac:function () {
    this.recorderManager.start({
      format:'aac'
    })
  },
 
  //录制mp3
  startRecordMp3:function () {
    this.recorderManager.start({
      format:'mp3'
    })
  },
 
  //停止录音
  stopRecord:function () {
    this.recorderManager.stop()
  },
 
  //播放录音
  playRecord:function () {
    var that = this
    var src = this.data.src
    if (src='') {
      this.tip('请先录音')
      return
    }
    this.innerAudioContext.src = this.data.src
    this.innerAudioContext.play()
  }
 
  
})

效果图:

微信小程序实现录音Record功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
JS中操作JSON总结
Dec 06 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
详解vue的diff算法原理
May 20 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php一些公用函数的集合
2008/03/27 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
vue实现文件上传功能
2018/08/13 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Linux的文件类型
2016/07/05 面试题
酒店销售经理岗位职责
2014/01/31 职场文书
测量工程专业求职信
2014/02/24 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
销售团队口号大全
2014/06/06 职场文书
幼儿老师求职信
2014/06/30 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers