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


Posted in Javascript onNovember 22, 2019

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

demo.wxml

<view>
 <button bindtap='startRecordMp3' type='primary'>录音开始(mp3)</button>
</view>
<view>
 <button bindtap='stopRecord' type='primary'>录音结束</button>
</view>
<view>
 <button bindtap='playRecord' type='primary'>播放录音</button>
</view>
<view>
 <button bindtap='sendRecord' type='primary'>播放录音</button>
</view>

demo.wxss

view{
 padding: 15px;
}

demo.js

// pages/newMusic/index.js
const recorderManager = wx.getRecorderManager();
Page({

  data: {
    
  },

  /**
  * 提示
  */
  tip: function (msg) {
    wx.showModal({
      title: '提示',
      content: msg,
      showCancel: false
    })
  }

  /**
   * 录制mp3音频
  */
  , startRecordMp3: function () {
    recorderManager.start({
      format: 'mp3'
    });
  }

  /**
   * 停止录音
   */
  , stopRecord: function () {
    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()
  },

  onLoad: function (options) {
    var that = this;
    recorderManager.onError(function () {
      that.tip("录音失败!")
    });
    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("播放录音失败!")
    })

  }

})

java后台接收

package com.azor.controller;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.codec.binary.Base64;
import org.apache.commons.lang.StringUtils;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.env.Environment;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.azor.utils.HttpAPIService;

import ch.qos.logback.classic.Logger;
import net.sf.json.JSONObject;

@RestController
@RequestMapping("/base_voice")
public class BaseController {
 
 private static final Logger logger = (Logger) LoggerFactory.getLogger(BaseController.class);
 private static String lineSeparator = System.getProperty("line.separator");
 
 @Autowired
 protected Environment env;
 
 @Autowired
 protected HttpAPIService httpAPIService;
 
 /** 上传文件保存路径 */
 private final String FILE_SAVE_PATH = "D:/photo/jac_hr_miniprogram_file/";

 /** 主业务数据Map */
 protected Map<String, Object> dataMap = new HashMap<>();
 
 /** HTTP POST 请求Map */
 protected Map<String, Object> postMap = new HashMap<>();
 
 @RequestMapping("/file_upload")
 public void saveFile(HttpServletRequest request, String url) throws Exception {
 logger.info("文件上传开始" + lineSeparator);
 // 1.获取从前台传过来得图片
 MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
 MultipartFile multipartFile = req.getFile("file");
 
 // 2.获得文件扩展名
 String extOfFile = getExtOfFile(multipartFile);
 // 3.保存到本地
 BufferedOutputStream bos = null;
 String filename = null;
 try {
  File dir = new File(file_save_path);
  if (!dir.exists()) {// 判断文件目录是否存在
  dir.mkdirs();
  }
  filename = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + (int) (Math.random() * 1000) + "."
   + extOfFile;
  bos = new BufferedOutputStream(new FileOutputStream(file_save_path + filename));
  bos.write(multipartFile.getBytes());

 } catch (Exception e) {
  e.printStackTrace();
 } finally {
  if (bos != null) {
  try {
   bos.close();
  } catch (IOException e) {
   e.printStackTrace();
  }
  }

 }
 
 }
 
 public String getExtOfFile(MultipartFile multipartFile) {
 // 获取文件的 名称.扩展名
 String oldName = multipartFile.getOriginalFilename();
 String extensionName = "";
 // 获取原来的扩展名
 if ((oldName != null) && (oldName.length() > 0)) {
  int dot = oldName.lastIndexOf('.');
  if ((dot > -1) && (dot < (oldName.length() - 1))) {
  extensionName = oldName.substring(dot+1);
  }
 }
 return extensionName;
 }
}

效果

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

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

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

Javascript 相关文章推荐
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
vue实现选中效果
Oct 07 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 #Javascript
小程序实现录音上传功能
Nov 22 #Javascript
vue使用recorder.js实现录音功能
Nov 22 #Javascript
微信小程序开发摇一摇功能
Nov 22 #Javascript
js实现录音上传功能
Nov 22 #Javascript
解决vue自定义全局消息框组件问题
Nov 22 #Javascript
JavaScript实现省市联动效果
Nov 22 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP array 的加法操作代码
2010/07/24 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php检测useragent版本示例
2014/03/24 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
大学三年的自我评价
2013/12/25 职场文书
班风学风建设方案
2014/05/06 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
测量员岗位职责
2015/02/14 职场文书
2015年环保局工作总结
2015/05/22 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server