小程序实现录音上传功能


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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
jquery validation验证表单插件
Jan 07 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
了解重排与重绘
May 29 Javascript
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
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
临时租车协议范本
2014/09/23 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
个人优缺点总结
2015/02/28 职场文书
新郎结婚感言
2015/07/31 职场文书
2019个人工作总结
2019/06/21 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Golang实现可重入锁的示例代码
2022/05/25 Golang