小程序实现录音上传功能


Posted in Javascript onNovember 22, 2019

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

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

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

小程序实现录音上传功能

index.wxml:

<view class='progress_box' bindtap='openRecording' style="display:{{openRecordingdis}}">
    <view class="progress_bgs">
     <view class="progress_bg">
      <image class="progress_img" src='../../../images/SubjectInformation/luyin.png'></image>
     </view>
   </view>
</view>

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<String> 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;
 }

效果图

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

小程序实现录音上传功能小程序实现录音上传功能

录音成功后的返回

小程序实现录音上传功能

录制的音频文件

小程序实现录音上传功能

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

Javascript 相关文章推荐
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
老生常谈的跨域处理
Jan 11 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue使用recorder.js实现录音功能
Nov 22 #Javascript
微信小程序开发摇一摇功能
Nov 22 #Javascript
js实现录音上传功能
Nov 22 #Javascript
解决vue自定义全局消息框组件问题
Nov 22 #Javascript
JavaScript实现省市联动效果
Nov 22 #Javascript
Vue混入mixins滚动触底的方法
Nov 22 #Javascript
超简单的微信小程序轮播图
Nov 22 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
js常用代码段收集
2011/10/28 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JavaScript字符串对象
2017/01/14 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
python lambda的使用详解
2021/02/26 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
做一个有道德的人演讲稿
2014/05/14 职场文书
我的生日感言
2015/08/03 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
比较node.js和Deno
2021/04/27 Javascript
React 高阶组件HOC用法归纳
2021/06/13 Javascript
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL