微信小程序实现录音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 文件夹选择框的两种解决方案
Jul 01 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
You might like
PHP基础学习小结
2011/04/17 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
理解javascript闭包
2015/12/15 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
光荣入党自我鉴定
2014/01/22 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
导游词之张家界
2019/10/31 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电