微信小程序实现录音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 相关文章推荐
拥抱模块化的JavaScript
Mar 07 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
详解AngularJS 模块化
Jun 14 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
You might like
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
javascript some()函数用法详解
2014/11/13 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
用python与文件进行交互的方法
2018/03/01 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python中Lambda表达式详解
2019/11/20 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
酒店led欢迎词
2014/01/09 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
村级换届选举方案
2014/05/10 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
合作与交流自我评价
2015/03/09 职场文书
学校实习推荐信
2015/03/27 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
Python 数据可视化之Seaborn详解
2021/11/02 Python