uniapp實現(xiàn)錄音上傳功能
uni-app 介紹
uni-app 是一個使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架。
開發(fā)者通過編寫 Vue.js 代碼,uni-app 將其編譯到iOS、Android、微信小程序等多個平臺,保證其正確運行并達到優(yōu)秀體驗。
html部分
我是寫了個錄音的圖片
點擊之后彈出一個彈出層(仿了下qq的樣式)
樣式怎么寫我就不贅述了大家都會
js部分
這是重點敲黑板!!!
創(chuàng)建實例
為了全局都好獲取到,可以隨時開始錄音,隨時停止錄音,我把他扔進全局了
const recorderManager = uni.getRecorderManager();//創(chuàng)建一個錄音實例 const innerAudioContext = uni.createInnerAudioContext();//用來播放的實例 // 為了防止蘋果手機靜音無法播放 uni.setInnerAudioOption({ obeyMuteSwitch: false }) innerAudioContext.autoplay = true; export default {
開始錄音
this.timecount = '00:00:00';//初始化錄音時間 this.hour = 0; this.minute = 0; this.second = 0; this.getTimeIntervalplus();//封裝的一個計時器,調(diào)用開始計時 const options = {//參數(shù) duration: 600000, sampleRate: 44100, numberOfChannels: 1, encodeBitRate: 192000, format: 'mp3', frameSize: 50 } recorderManager.start(options);
結(jié)束錄音
需要限制最短時長的可以做下判斷,我這邊沒寫
recorderManager.stop();//結(jié)束錄音 clearInterval(this.timer);//結(jié)束計時
播放錄音
innerAudioContext.src = this.voicePath;//播放的地址(上面錄的本地地址) innerAudioContext.play();//播放
暫停播放
innerAudioContext.pause();//暫停播放 clearInterval(this.timer);//清除定時器
提交錄音到后端
//結(jié)束錄音提交錄音 submitrecord: function() { this.count += 1;//這是定義了一個全局的變量來防止多次提交 if (this.count == 1){ console.log(this.count); var https = getApp().globalData.https; if (this.recordednum == 2) { this.recordednum = 3; recorderManager.stop(); clearInterval(this.timer); } if (this.voicePath != '') { console.log(this.voicePath); uni.uploadFile({ url: https + 'Uploads/uploadVoiceVideo', filePath: this.voicePath, name: 'file', success: (res) => { this.count = 0; //初始化 this.initialize()//我封裝了一個初始化定時器的函數(shù) this.timer = this.timecount; this.show_recording = false; var data = JSON.parse(res.data); if (this.current == 0) {//判斷是哪個列里面錄的音插回去 this.firsvideo.push(data.address); } else if (this.current == 1) { this.secovideo.push(data.address); console.log(this.secovideo); } else if (this.current == 2) { this.thrivideo.push(data.address); } uni.showToast({ title: '提交成功!', icon: 'none', duration: 1200 }) }, fail: (err) => { uni.hideLoading(); uni.showToast({ tilte: '上傳失敗~', icon: 'none', duration: 1200 }) return } }); } else { console.log("錄音失敗") uni.showToast({ tilte: '錄音失敗', icon: 'none', duration: 1200 }) uni.hideLoading(); this.show_recording = false; this.checkPermission() this.rerecord() } } else { uni.showToast({ title: '請勿重復(fù)提交', icon: 'none', duration: 2000 }) this.count=0; } },
重新錄制
//重新錄制 rerecord: function() { //初始化定時器 this.initialize() this.getTimeIntervalplus();//開始計時 const options = { duration: 600000, sampleRate: 44100, numberOfChannels: 1, encodeBitRate: 192000, format: 'mp3', frameSize: 50 } recorderManager.start(options);//開始錄音 },
onLoad部分
onLoad(option) { var appointment_message = option.appointment_message; appointment_message = JSON.parse(appointment_message); this.appointment_message = appointment_message; let that = this; recorderManager.onStop(function(res) { console.log('recorder stop' + JSON.stringify(res)); that.voiceDuration = res.duration; that.voicePath = res.tempFilePath; console.log(res); }); },
計時器
// 計時器增 getTimeIntervalplus() { clearInterval(this.timer); this.timer = setInterval(() => { this.second += 1; if (this.second >= 60) { this.minute += 1; this.second = 0; } if (this.minute >= 10) { this.recordednum = 3; recorderManager.stop(); clearInterval(this.timer); } this.second2 = this.second; this.minute2 = this.minute; this.timecount = this.showNum(this.hour) + ":" + this.showNum(this.minute) + ":" + this .showNum(this.second); - console.log("this.timecount", this.timecount) }, 1000); },
數(shù)據(jù)部分
data() { return { action: 'https://yl.letter-song.top/api/Uploads/uploadPicture', //上傳圖片地址 textareavalue: '', //文字描述值 fileList2: [], //返回圖片路徑2 fileList3: [], //返回圖片路徑3 fileList: [], //返回圖片路徑1 firsvideo: [], //錄音路徑1 secovideo: [], //錄音路徑2 thrivideo: [], //錄音路徑3 appointment_message: '', //預(yù)約信息上個頁面?zhèn)鲄⑦^來的 list: [{ //標簽表 name: '過往癥狀' }, { name: '近期癥狀' }, { name: '本次癥狀', }], current: 0, //選中項 sty: { //滑塊樣式 height: '4px', borderRadius: '2rpx', borderTopLeftRadius: '10px', backgroundColor: '#3ECEB5' }, activeItem: { //選中項樣式 color: '#333333', fontWeight: '600', fontSize: '36rpx', }, show_recording: false, //調(diào)起錄音彈窗 recordednum: 1, //1:初始狀態(tài)2.錄音狀態(tài)3結(jié)束 voicePath: '', //本次音頻錄音路徑 voiceDuration: '', timecount: '00:00:00', timecount2: "", hour: 0, minute: 0, second: 0, hour2: 0, minute2: 0, second2: 0, isZant: false, timer: '', yuming: '這是域名', permiss: 0, //0為開啟錄音權(quán)限1已開啟錄音權(quán)限, count: 0 } },
到此這篇關(guān)于uniapp 實現(xiàn)錄音上傳功能的文章就介紹到這了,更多相關(guān)uniapp 錄音上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中的Math.SQRT1_2屬性使用簡介
這篇文章主要介紹了JavaScript中的Math.SQRT1_2屬性的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06javascript創(chuàng)建數(shù)組之聯(lián)合數(shù)組的使用方法示例
聯(lián)合數(shù)組也叫做鍵值數(shù)組,和php中的鍵值數(shù)組類似,下面看代碼如何演示2013-12-12javascript 基礎(chǔ)篇4 window對象,DOM
window這個對象我們之前也稍微接觸過了,其實就是對窗體進行操作,利用這個對象我們可以實現(xiàn)很多的操作,比如窗口移動啊,設(shè)置窗口大小啊等等2012-03-03JavaScript 高級篇之DOM文檔,簡單封裝及調(diào)用、動態(tài)添加、刪除樣式(六)
學(xué)習(xí)是有趣的,但有過濾的學(xué)習(xí)內(nèi)容就更好,本博主就專門為剛接觸javascript客戶端編程的朋友提供及分享個人學(xué)習(xí)經(jīng)歷!建議大家看看:(湯姆大叔的博客)2012-04-04