微信小程序实现录音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 相关文章推荐
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
You might like
php sybase_fetch_array使用方法
2014/04/15 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
如何正确理解vue中的key详解
2019/11/02 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
利用Python如何生成便签图片详解
2018/07/09 Python
详解Python做一个名片管理系统
2019/03/14 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python 并发下载器实现方法示例
2019/11/22 Python
学生生病请假条范文
2014/02/16 职场文书
房展策划方案
2014/06/07 职场文书
应届大专生自荐书
2014/06/16 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书