热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

小程序实现录音上传功能

这篇文章主要为大家详细介绍了小程序实现录音上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序录音上传的具体代码,供大家参考,具体内容如下

首先我们可以先看一下微信小程序的API

这里有关于小程序录音的一些基本配置

index.wxml:


    
     
      
     
   

index.wxss:

.topicRecording {
 float: left;
 width: 40%;
 height: 100%;
 position: relative;
}
 
 
.progress_box {
 width: 130rpx;
 height: 130rpx;
 margin-left: -65rpx;
 position: absolute;
 bottom: 0;
 left: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #ccc;
 border-radius: 50%;
}
 
.progress_bgs {
 width: 114rpx;
 height: 114rpx;
 background: #fff;
 border-radius: 50%;
 margin: 9rpx;
}
 
 
.progress_bg {
 width: 106rpx;
 height: 106rpx;
 margin: 5rpx;
 position: absolute;
 background: #444;
 border-radius: 50%;
}
 
 
 
.progress_img {
 width: 82rpx;
 height: 82rpx;
 border-radius: 50%;
 margin: 12rpx;
}

index.js:

Page({
 data: {
  openRecordingdis: "block",//录音图片的不同
  shutRecordingdis: "none",//录音图片的不同
  recordingTimeqwe:0,//录音计时
  setInter:""//录音名称
 },
 
  //录音计时器
 recordingTimer:function(){
  var that = this;
  //将计时器赋值给setInter
  that.data.setInter = setInterval(
   function () {
    var time = that.data.recordingTimeqwe + 1;
    that.setData({
     recordingTimeqwe: time
    })
   }
   , 1000); 
 },
 
 
 //开始录音
 openRecording: function() {
  var that = this;
  wx.getSystemInfo({
   success: function(res) {
    that.setData({
     shutRecordingdis: "block",
     openRecordingdis: "none"
    })
   }
  })
  const optiOns= {
   duration: 60000, //指定录音的时长,单位 ms,最大为10分钟(600000),默认为1分钟(60000)
   sampleRate: 16000, //采样率
   numberOfChannels: 1, //录音通道数
   encodeBitRate: 96000, //编码码率
   format: 'mp3', //音频格式,有效值 aac/mp3
   frameSize: 50, //指定帧大小,单位 KB
  }
  //开始录音计时  
  that.recordingTimer();
  //开始录音
  recorderManager.start(options);
  recorderManager.onStart(() => {
   console.log('。。。开始录音。。。')
  });
  //错误回调
  recorderManager.onError((res) => {
   console.log(res);
  })
 },
 
 //结束录音
 shutRecording: function() {
  var that = this;
  wx.getSystemInfo({
   success: function(res) {
    that.setData({
     shutRecordingdis: "none",
     openRecordingdis: "block"
    })
   }
  })
  recorderManager.stop();
  recorderManager.onStop((res) => {
   console.log('。。停止录音。。', res.tempFilePath)
   const {tempFilePath} = res;
   //结束录音计时 
   clearInterval(that.data.setInter);
   //上传录音
   wx.uploadFile({
    url: appURL + '/wx_SubjectInformation/wx_SubjectRecordKeeping.do',//这是你自己后台的连接
    filePath: tempFilePath,
    name:"file",//后台要绑定的名称
    header: {
     "Content-Type": "multipart/form-data"
    },
    //参数绑定
    formData:{
     recordingtime: that.data.recordingTimeqwe,
     topicid: that.data.topicid,
     userid:1,
     praisepoints:0
    },
    success:function(ress){
     console.log(res);
     wx.showToast({
      title: '保存完成',
      icon:'success',
      duration:2000
     })
    },
    fail: function(ress){
     console.log("。。录音保存失败。。");
    }
   })
  })
 },
 
 //录音播放
 recordingAndPlaying: function(eve) {
  wx.playBackgroundAudio({
   //播放地址
   dataUrl: '' + eve.currentTarget.dataset.gid + ''
  })
 },
 
})

上传服务

@RequestMapping(value = "/wx_SubjectRecordKeeping", produces = "application/json")
 @ResponseBody
 public Object wx_SubjectRecordKeeping(HttpServletRequest request,
  @RequestParam("file") MultipartFile files, String recordingtime,
  int topicid,int userid,int praisepoints) {
 // 构建上传目录路径
 // request.getServletContext().getRealPath("/upload");
 String uploadPath = 你自己保存音频的URL;
 // 如果目录不存在就创建
 File uploadDir = new File(uploadPath);
 if (!uploadDir.exists()) {
  uploadDir.mkdir();
 }
 // 获取文件的 名称.扩展名
 String oldName = files.getOriginalFilename();
 String extensiOnName= "";
 // 获取原来的扩展名
 if ((oldName != null) && (oldName.length() > 0)) {
  int dot = oldName.lastIndexOf('.');
  if ((dot > -1) && (dot <(oldName.length() - 1))) {
  extensiOnName= oldName.substring(dot);
  }
 }
 // 构建文件名称
 String fileName = System.currentTimeMillis() + "_" + System.nanoTime()
  + extensionName;
 // 获取
 String[] fileType = { ".CD", ".WAVE", ".AIFF", ".AU", ".MPEG", ".MP3",
  ".MPEG-4", ".MIDI", ".WMA", ".RealAudio", ".VQF", ".OggVorbis",
  ".AMR" };
 List fileTyepLists = Arrays.asList(fileType);
 int fileTypeOnCount= 0;
 for (String fileTyepListss : fileTyepLists) {
  if (fileTyepListss.equalsIgnoreCase(extensionName)) {
  // -----如果是音频文件的话
  // 构建文件路径
  String filePath = uploadPath + File.separator + fileName;
  // 保存文件
  try {
   FileUtils.writeByteArrayToFile(new File(filePath),
    files.getBytes());
  } catch (Exception e) {
   e.printStackTrace();
  }
  } else {
  fileTypeOnCount++;
  }
 }
 if (fileTypeOnCount== fileTyepLists.size()) {
  // 不是音频文件
  return false;
 }
 return false;
 }

效果图

点击开始录音、录完后点击结束录音

录音成功后的返回

录制的音频文件

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


推荐阅读
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 微信官方授权及获取OpenId的方法,服务器通过SpringBoot实现
    主要步骤:前端获取到code(wx.login),传入服务器服务器通过参数AppID和AppSecret访问官方接口,获取到OpenId ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 华为鸿蒙系统官网2.0报名方法及适用设备
    本文介绍了华为鸿蒙系统官网2.0报名的适用设备、报名方法以及三种方式,包括在应用商店下载开发者联盟app、在官网中进行报名、在微信公众号中申请体验HarmonyOS 2.0 手机开发者Beta版本。同时提醒错过测试机会的用户可以等待后续的正式版发布。 ... [详细]
  • 2016 linux发行版排行_灵越7590 安装 linux (manjarognome)
    RT之前做了一次灵越7590黑苹果炒作业的文章,希望能够分享给更多不想折腾的人。kawauso:教你如何给灵越7590黑苹果抄作业​zhuanlan.z ... [详细]
  • 手把手教你使用GraphPad Prism和Excel绘制回归分析结果的森林图
    本文介绍了使用GraphPad Prism和Excel绘制回归分析结果的森林图的方法。通过展示森林图,可以更加直观地将回归分析结果可视化。GraphPad Prism是一款专门为医学专业人士设计的绘图软件,同时也兼顾统计分析的功能,操作便捷,可以帮助科研人员轻松绘制出高质量的专业图形。文章以一篇发表在JACC杂志上的研究为例,利用其中的多因素回归分析结果来绘制森林图。通过本文的指导,读者可以学会如何使用GraphPad Prism和Excel绘制回归分析结果的森林图。 ... [详细]
  • python3 nmap函数简介及使用方法
    本文介绍了python3 nmap函数的简介及使用方法,python-nmap是一个使用nmap进行端口扫描的python库,它可以生成nmap扫描报告,并帮助系统管理员进行自动化扫描任务和生成报告。同时,它也支持nmap脚本输出。文章详细介绍了python-nmap的几个py文件的功能和用途,包括__init__.py、nmap.py和test.py。__init__.py主要导入基本信息,nmap.py用于调用nmap的功能进行扫描,test.py用于测试是否可以利用nmap的扫描功能。 ... [详细]
author-avatar
气质沫儿巛1314
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有