uniapp如何實(shí)現(xiàn)錄音上傳功能

這篇文章主要介紹uniapp如何實(shí)現(xiàn)錄音上傳功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

uni-app 介紹

uni-app 是一個(gè)使用 Vue.js 開發(fā)跨平臺(tái)應(yīng)用的前端框架。
開發(fā)者通過(guò)編寫 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();//用來(lái)播放的實(shí)例
	// 為了防止蘋果手機(jī)靜音無(wú)法播放
	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í)長(zhǎng)的可以做下判斷,我這邊沒(méi)寫

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è)全局的變量來(lái)防止多次提交
	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è)頁(yè)面?zhèn)鲄⑦^(guò)來(lái)的
				list: [{ //標(biāo)簽表
					name: '過(guò)往癥狀'
				}, {
					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
			}
		},

以上是“uniapp如何實(shí)現(xiàn)錄音上傳功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！