小程序?qū)崿F(xiàn)錄音上傳功能

本文實(shí)例為大家分享了小程序錄音上傳的具體代碼,供大家參考,具體內(nèi)容如下

十年的循化網(wǎng)站建設(shè)經(jīng)驗(yàn),針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動調(diào)整循化建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“循化網(wǎng)站設(shè)計(jì)”,“循化網(wǎng)站推廣”以來,每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

這里有關(guān)于小程序錄音的一些基本配置

小程序?qū)崿F(xiàn)錄音上傳功能

index.wxml:

<view class='progress_box' bindtap='openRecording' >
    <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,//錄音計(jì)時(shí)
  setInter:""http://錄音名稱
 },
 
  //錄音計(jì)時(shí)器
 recordingTimer:function(){
  var that = this;
  //將計(jì)時(shí)器賦值給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, //指定錄音的時(shí)長,單位 ms,最大為10分鐘(600000),默認(rèn)為1分鐘(60000)
   sampleRate: 16000, //采樣率
   numberOfChannels: 1, //錄音通道數(shù)
   encodeBitRate: 96000, //編碼碼率
   format: 'mp3', //音頻格式,有效值 aac/mp3
   frameSize: 50, //指定幀大小,單位 KB
  }
  //開始錄音計(jì)時(shí)  
  that.recordingTimer();
  //開始錄音
  recorderManager.start(options);
  recorderManager.onStart(() => {
   console.log('。。。開始錄音。。。')
  });
  //錯(cuò)誤回調(diào)
  recorderManager.onError((res) => {
   console.log(res);
  })
 },
 
 //結(jié)束錄音
 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;
   //結(jié)束錄音計(jì)時(shí) 
   clearInterval(that.data.setInter);
   //上傳錄音
   wx.uploadFile({
    url: appURL + '/wx_SubjectInformation/wx_SubjectRecordKeeping.do',//這是你自己后臺的連接
    filePath: tempFilePath,
    name:"file",//后臺要綁定的名稱
    header: {
     "Content-Type": "multipart/form-data"
    },
    //參數(shù)綁定
    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 + ''
  })
 },
 
})

上傳服務(wù)

@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) {
 // 構(gòu)建上傳目錄路徑
 // request.getServletContext().getRealPath("/upload");
 String uploadPath = 你自己保存音頻的URL;
 // 如果目錄不存在就創(chuàng)建
 File uploadDir = new File(uploadPath);
 if (!uploadDir.exists()) {
  uploadDir.mkdir();
 }
 // 獲取文件的 名稱.擴(kuò)展名
 String oldName = files.getOriginalFilename();
 String extensionName = "";
 // 獲取原來的擴(kuò)展名
 if ((oldName != null) && (oldName.length() > 0)) {
  int dot = oldName.lastIndexOf('.');
  if ((dot > -1) && (dot < (oldName.length() - 1))) {
  extensionName = oldName.substring(dot);
  }
 }
 // 構(gòu)建文件名稱
 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)) {
  // -----如果是音頻文件的話
  // 構(gòu)建文件路徑
  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;
 }

效果圖

點(diǎn)擊開始錄音、錄完后點(diǎn)擊結(jié)束錄音

小程序?qū)崿F(xiàn)錄音上傳功能小程序?qū)崿F(xiàn)錄音上傳功能

錄音成功后的返回

小程序?qū)崿F(xiàn)錄音上傳功能

錄制的音頻文件

小程序?qū)崿F(xiàn)錄音上傳功能

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題:小程序?qū)崿F(xiàn)錄音上傳功能
文章源于:http://bm7419.com/article0/jdiiio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)