小程序实现录音上传功能

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

首先我们可以先看一下微信小程序的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;
 }

效果图

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

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

录音成功后的返回

小程序实现录音上传功能

录制的音频文件

小程序实现录音上传功能

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

时间: 2019-11-19

微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

本文介绍了微信小程序的开发,主要包括图片.录音.音频播放.音乐播放.视频.文件,具体如下: 图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到. 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'],

微信小程序录音与播放录音功能

小程序中提供了两种录音的API 旧版录音功能 首先启动录音,然后停止录音即可拉到音频的临时地址 启动录音: var that = this; wx.startRecord({ success: function (res) { // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径 var tempFilePath = res.tempFilePath that.setData({ src: tempFilePath }) }, fail: function

30分钟快速实现小程序语音识别功能

前言 为了参加某个作秀活动,研究了一波如何结合小程序.科大讯飞实现语音录入.识别的实现.科大讯飞开发文档中只给出 Python 的 demo,并没有给出 node.js 的 sdk,但问题不大.本文将从小程序相关代码到最后对接科大讯飞 api 过程,一步步介绍,半个小时,搭建完成小程序语音识别功能!不能再多了! 当然,前提是最好掌握有一点点小程序.node.js 甚至是音频相关的知识.下面话不多说了,来一起看看详细的介绍吧 架构先行 架构比较简单,大伙儿可以先看下图.除了小程序,需要提供 3 个

小程序实现按下录音松开识别语音

本文实例为大家分享了小程序按下录音松开识别语音的具体代码,供大家参考,具体内容如下 wxml <view class='circle position-absol'> <text wx:if="{{!anmationShow}}" class='fz-12 fot-col block'>按住话筒说话,松开后自动识别文字</text> <text wx:if="{{anmationShow}}" class='fz-12 fo

微信小程序开发之录音机 音频播放 动画实例 (真机可用)

趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,

微信小程序实现录音时的麦克风动画效果实例

前言 这个简单的麦克风demo的创意是来源于"包你说"中的录音效果,实现的方式其实也并不难,但对于小程序中的简易动画的使用的确很实用. 效果 先来看个demo,gif帧数比较低,实际效果和真机测试的流畅性还是很OK的 思路 通过setTimeout配合this.sedData来改变image中的src路径来生成动画.动画的播放以及隐藏则通过wx:if绑定一个自定义的参数来控制.下面就直接上代码. 代码 html <view class='animation-talk'> &

微信小程序录音文件格式silk遇到的问题及解决方法

不好意思,误导大家了,这种将silk解密的方式只是在小程序测试的时候可以,上线以后这种方法是不行的,还是需要使用解密转码.参见:https://github.com/kn007/silk-v3-decoder 微信小程序的录音文件就是个坑... 录音文件为silk格式,说是silk其实是base64加密后的webm格式,只需将其转为webm格式即可. 我在解决问题的过程中,学到了,遇到问题一定要抓住本质,本来我以为silk是啥格式,这不懵逼了,赶紧找audio是否能播放silk,不能播放就去找网

微信小程序实现语音识别转文字功能及遇到的坑

最近为小程序增加语音识别转文字的功能,坑路不断,特此记录. 微信开发者工具 开发者工具上的录音文件与移动端格式不同,暂时只可在工具上进行播放调试,无法直接播放或者在客户端上播放 debug的时候发现,工具上录音的路径是http://tmp/xxx.mp3,客户端上录音是wxfile://xxx.mp3. 忽悠呢,不是格式不同,是映射路径不同. 其实做个兼容也不难,每次提示一行文字,很丑. 采样率与编码码率限制 每种采样率有对应的编码码率范围有效值,设置不合法的采样率或编码码率会导致录音失败.详细

微信小程序和百度的语音识别接口详解

介绍 因为项目需要,使用到了微信小程序和百度的语音接口 现在将项目中的一个小模块拿出来单独分享. 技术关键字 微微信小程序 百度语音接口 nodejs,express fluent-ffmegp 环境 windows 10 vs code 1.20.1 微信小程序开发工具 1.02.1802270 花生壳-提供域名和内容穿透-用于方便本地远程调试微信小程序 考虑到业务并不复杂,所以就将所有的代码都放在一个页面就可以了(wxml,wxss,js统称为一个页面) 文件目录 页面 index.wxml

python实现录音小程序

本文为大家分享了python实现录音小程序的具体代码,供大家参考,具体内容如下 学习目标:掌握python的pyaudio扩展包和Wave模块录制语音的方法 Wav音频:声道数,采样频率,量化位数 python Wav包是自带的,pyaudio需要下载 pip3 install pyaudio python读Wav文件: fp=wave.open('','rb') nf=fp.getnframes()#获取文件的采样点数量 print('sampwidth:',fp.getsampwidth()

小程序采集录音并上传到后台

本文实例为大家分享了小程序录音上传的具体代码,供大家参考,具体内容如下 demo.wxml <view> <button bindtap='startRecordMp3' type='primary'>录音开始(mp3)</button> </view> <view> <button bindtap='stopRecord' type='primary'>录音结束</button> </view> <vi

微信小程序 wx.uploadFile无法上传解决办法

微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

微信小程序图片选择、上传到服务器、预览(PHP)实现实例

微信小程序图片选择.上传到服务器.预览(PHP)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用) 小程序前端代码: <view class="section"> <form bindsubmit="bindFormSubmit"> <textarea placeholder="请输入问题内容" name=&quo

微信小程序 ES6Promise.all批量上传文件实现代码

微信小程序 ES6Promise.all批量上传文件实现代码 客户端 Page({ onLoad: function() { wx.chooseImage({ count: 9, success: function({ tempFilePaths }) { var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => { return new Promise(function(resolve, reject) { wx.

Android程序开发通过HttpURLConnection上传文件到服务器

一:实现原理 最近在做Android客户端的应用开发,涉及到要把图片上传到后台服务器中,自己选择了做Spring3 MVC HTTP API作为后台上传接口,android客户端我选择用HttpURLConnection来通过form提交文件数据实现上传功能,本来想网上搜搜拷贝一下改改代码就好啦,发现根本没有现成的例子,多数的例子都是基于HttpClient的或者是基于Base64编码以后作为字符串来传输图像数据,于是我不得不自己动手,参考了网上一些资料,最终实现基于HttpURLConnect

uploadify上传及后台文件合法性验证的代码解析

后台上传方法 @RequestMapping(value = "/api_upload", method = RequestMethod.POST) public @ResponseBody String upload(HttpServletRequest request,HttpServletResponse response) { //获取上传路径 String uploadFilePath=ParameterConstants.UPLOAD_FILE_PATH; String s

android选择视频文件上传到后台服务器

本文实例为大家分享了android选择视频文件上传到后台服务器的具体代码,供大家参考,具体内容如下 选择本地视频文件 附上Demo 首先第一步打开打开相册选择视频文件: Intent intent = new Intent(); intent.setType("video/*"); intent.setAction(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); ((Activity)

微信小程序中多个页面传参通信的学习与实践

前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

微信小程序 在Chrome浏览器上运行以及WebStorm的使用

「微信小程序」的开发框架体验起来,还不错--自带了UI框架.但是问题是他的IDE,表现起来相当的糟糕--其实主要是因为,我当时买WebStorm License买了好多年.所以,我觉得他的IDE真不如我这个付费好用. 而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」.微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了. 如果我们放任下去,未来的Web世界令人堪忧. 好了,废话说完了: 文章太长不想看,可以直接看Demo哈哈: GitHu

微信小程序多张图片上传功能

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api 示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq.com/upload',

微信小程序教程之本地图片上传(leancloud)实例详解

微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da