uniapp實(shí)現(xiàn)錄音上傳功能
更新時(shí)間：2021年09月07日 09:04:02 作者：撐戌圓愛癢生
這篇文章主要介紹了uniapp 實(shí)現(xiàn)錄音上傳功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
uni-app 介紹
uni-app 是一個(gè)使用 Vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架。
開發(fā)者通過編寫 Vue.js 代碼，uni-app 將其編譯到iOS、Android、微信小程序等多個(gè)平臺(tái)，保證其正確運(yùn)行并達(dá)到優(yōu)秀體驗(yàn)。
html部分
我是寫了個(gè)錄音的圖片
點(diǎn)擊之后彈出一個(gè)彈出層(仿了下qq的樣式)
樣式怎么寫我就不贅述了大家都會(huì)
js部分
這是重點(diǎn)敲黑板!!!
創(chuàng)建實(shí)例
為了全局都好獲取到,可以隨時(shí)開始錄音,隨時(shí)停止錄音,我把他扔進(jìn)全局了
const recorderManager = uni.getRecorderManager();//創(chuàng)建一個(gè)錄音實(shí)例
const innerAudioContext = uni.createInnerAudioContext();//用來播放的實(shí)例
// 為了防止蘋果手機(jī)靜音無法播放
uni.setInnerAudioOption({
obeyMuteSwitch: false
})
innerAudioContext.autoplay = true;
export default {
開始錄音
this.timecount = '00:00:00';//初始化錄音時(shí)間
this.hour = 0;
this.minute = 0;
this.second = 0;
this.getTimeIntervalplus();//封裝的一個(gè)計(jì)時(shí)器,調(diào)用開始計(jì)時(shí)
const options = {//參數(shù)
duration: 600000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50
}
recorderManager.start(options);
結(jié)束錄音
需要限制最短時(shí)長的可以做下判斷,我這邊沒寫
recorderManager.stop();//結(jié)束錄音 clearInterval(this.timer);//結(jié)束計(jì)時(shí)
播放錄音
innerAudioContext.src = this.voicePath;//播放的地址(上面錄的本地地址) innerAudioContext.play();//播放
暫停播放
innerAudioContext.pause();//暫停播放 clearInterval(this.timer);//清除定時(shí)器
提交錄音到后端
//結(jié)束錄音提交錄音
submitrecord: function() {
this.count += 1;//這是定義了一個(gè)全局的變量來防止多次提交
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()//我封裝了一個(gè)初始化定時(shí)器的函數(shù)
this.timer = this.timecount;
this.show_recording = false;
var data = JSON.parse(res.data);
if (this.current == 0) {//判斷是哪個(gè)列里面錄的音插回去
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: '請(qǐng)勿重復(fù)提交',
icon: 'none',
duration: 2000
})
this.count=0;
}
},
重新錄制
//重新錄制
rerecord: function() {
//初始化定時(shí)器
this.initialize()
this.getTimeIntervalplus();//開始計(jì)時(shí)
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);
});
},
計(jì)時(shí)器
// 計(jì)時(shí)器增
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ù)約信息上個(gè)頁面?zhèn)鲄⑦^來的
list: [{ //標(biāo)簽表
name: '過往癥狀'
}, {
name: '近期癥狀'
}, {
name: '本次癥狀',
}],
current: 0, //選中項(xiàng)
sty: { //滑塊樣式
height: '4px',
borderRadius: '2rpx',
borderTopLeftRadius: '10px',
backgroundColor: '#3ECEB5'
},
activeItem: { //選中項(xiàng)樣式
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 實(shí)現(xiàn)錄音上傳功能的文章就介紹到這了,更多相關(guān)uniapp 錄音上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
還一個(gè)要注意的就是null雖然是Object型 但是它非常特殊，本身存放在stack棧中。你可以理解成它是Object的一種特殊形式2010-08-08
Javascript學(xué)習(xí)筆記一 之 數(shù)據(jù)類型
在接觸每一門編程語言之前，首先明白我們程序設(shè)計(jì)要處理的是數(shù)據(jù)，而數(shù)據(jù)又用數(shù)據(jù)類型將其區(qū)分。2010-12-12
這篇文章主要介紹了javascript類型轉(zhuǎn)換示例,需要的朋友可以參考下2014-04-04
深入理解JavaScript系列（37）：設(shè)計(jì)模式之享元模式詳解
這篇文章主要介紹了深入理解JavaScript系列（37）：設(shè)計(jì)模式之享元模式詳解,享元模式（Flyweight）,運(yùn)行共享技術(shù)有效地支持大量細(xì)粒度的對(duì)象,避免大量擁有相同內(nèi)容的小類的開銷(如耗費(fèi)內(nèi)存),使大家共享一個(gè)類(元類),需要的朋友可以參考下2015-03-03
js中&& 和 ||運(yùn)算符經(jīng)常用到，但也好混淆，下面是對(duì)自己的使用坐下記錄,需要的朋友可以參考下2014-08-08
我們下面來看一篇關(guān)于JavaScript中借用方法的一個(gè)詳細(xì)介紹，注意：本文假設(shè)你已經(jīng)掌握使用 call()、apply()和bind()的相關(guān)知識(shí)和它們之間的區(qū)別，希望這篇文章能夠讓各位了解到JavaScript中的借用方法吧。2016-08-08
學(xué)JavaScript七大注意事項(xiàng)【必看】
下面小編就為大家?guī)硪黄獙W(xué)JavaScript七大注意事項(xiàng)【必看】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
Javascript MD4...2006-12-12
淺談JavaScript中setInterval和setTimeout的使用問題
這篇文章主要介紹了淺談JavaScript中setInterval和setTimeout的使用問題,作者建議在任務(wù)龐大時(shí)盡量避免使用setInterval,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了javascript判斷office版本示例,需要的朋友可以參考下2014-04-04