热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要为大家详细介绍了微信小程序实现录音Record功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的

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

布局



 
 
 
 

样式:

/* 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()
  }
 
  
})

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程笔记。


推荐阅读
  • C# 7.0 新特性:基于Tuple的“多”返回值方法
    本文介绍了C# 7.0中基于Tuple的“多”返回值方法的使用。通过对C# 6.0及更早版本的做法进行回顾,提出了问题:如何使一个方法可返回多个返回值。然后详细介绍了C# 7.0中使用Tuple的写法,并给出了示例代码。最后,总结了该新特性的优点。 ... [详细]
  • 使用eclipse创建一个Java项目的步骤
    本文介绍了使用eclipse创建一个Java项目的步骤,包括启动eclipse、选择New Project命令、在对话框中输入项目名称等。同时还介绍了Java Settings对话框中的一些选项,以及如何修改Java程序的输出目录。 ... [详细]
  • 生产环境下JVM调优参数的设置实例
     正文前先来一波福利推荐: 福利一:百万年薪架构师视频,该视频可以学到很多东西,是本人花钱买的VIP课程,学习消化了一年,为了支持一下女朋友公众号也方便大家学习,共享给大家。福利二 ... [详细]
  • Android跨进程通信IPC之9——Binder通信机制
    移步系列Android跨进程通信IPC系列1Android整体架构Android系统架构及系统源码目录Android系统架构 ... [详细]
  • 小程序服务器获取用户名头像,微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现...
    这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些& ... [详细]
  • 机位|成人_在成人影片里做17种姿势识别?大佬在线求助:训练集不够用!
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了在成人影片里做17种姿势识别?大佬在线求助:训练集不够用!相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Metasploit攻击渗透实践
    本文介绍了Metasploit攻击渗透实践的内容和要求,包括主动攻击、针对浏览器和客户端的攻击,以及成功应用辅助模块的实践过程。其中涉及使用Hydra在不知道密码的情况下攻击metsploit2靶机获取密码,以及攻击浏览器中的tomcat服务的具体步骤。同时还讲解了爆破密码的方法和设置攻击目标主机的相关参数。 ... [详细]
  • 在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤,包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读,读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
  • 本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤,包括安装必要的工具和驱动,测试mssql的连接,配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值,实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • 突破MIUI14限制,自定义胶囊图标、大图标样式,支持任意APP
    本文介绍了如何突破MIUI14的限制,实现自定义胶囊图标和大图标样式,并支持任意APP。需要一定的动手能力和主题设计师账号权限或者会主题pojie。详细步骤包括应用包名获取、素材制作和封包获取等。 ... [详细]
  • EPPlus绘制刻度线的方法及示例代码
    本文介绍了使用EPPlus绘制刻度线的方法,并提供了示例代码。通过ExcelPackage类和List对象,可以实现在Excel中绘制刻度线的功能。具体的方法和示例代码在文章中进行了详细的介绍和演示。 ... [详细]
  • 跨站的艺术XSS Fuzzing 的技巧
    作者|张祖优(Fooying)腾讯云云鼎实验室对于XSS的漏洞挖掘过程,其实就是一个使用Payload不断测试和调整再测试的过程,这个过程我们把它叫做F ... [详细]
  • 通过存储型XSS漏洞获取目标用户本地私钥信息
    运维|安全存储型XSS漏洞,目标用户,本地,私钥信息运维-安全舍得网源码,vscode代码检查工具,ubuntu壁纸修改,tomcat网页部署项目,爬虫枯木,php采集文件,马鞍山 ... [详细]
  • 开发笔记:讲给前端的网络安全: 网络模型与攻击手段
    本文由编程笔记#小编为大家整理,主要介绍了讲给前端的网络安全:网络模型与攻击手段相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 上一章我们设置了分类页面的页面标签,这一章我们继续标签设置格局。话不多说标签设置格局,我们一起操练起来吧~ ... [详细]
author-avatar
mobiledu2502861197
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有