本文實(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)于小程序錄音的一些基本配置
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é)束錄音
錄音成功后的返回
錄制的音頻文件
以上就是本文的全部內(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)