uniapp realizes the recording upload function

uniapp realizes the recording upload function

uni-app Introduction

uni-app is a front-end framework for developing cross-platform applications using Vue.js.
Developers write Vue.js code, and uni-app compiles it to multiple platforms such as iOS, Android, and WeChat applets to ensure that it runs correctly and provides an excellent experience.

HTML part

I wrote a recording image that pops up a pop-up layer when clicked (imitating the style of QQ)

insert image description here

I won't go into details about how to write the style, everyone knows it.

insert image description here

js part

This is the key point!!!

insert image description here

Create an instance

In order to get the whole picture, you can start recording and stop recording at any time. I put it into the whole picture.

const recorderManager = uni.getRecorderManager();//Create a recording instance const innerAudioContext = uni.createInnerAudioContext();//Instance used for playback // To prevent the iPhone from being muted and unable to play uni.setInnerAudioOption({
		obeyMuteSwitch: false
	})
	innerAudioContext.autoplay = true;
	export default {

Start recording

this.timecount = '00:00:00'; //Initialize recording time this.hour = 0;
this.minute = 0;
this.second = 0;
this.getTimeIntervalplus(); //Encapsulate a timer, call to start timing const options = { //Parameter duration: 600000,
	sampleRate: 44100,
	numberOfChannels: 1,
	encodeBitRate: 192000,
	format: 'mp3',
	frameSize: 50
}
recorderManager.start(options);

insert image description here

End recording

If you need to limit the minimum duration, you can make your own judgment. I haven't written it here.

recorderManager.stop(); //End recording clearInterval(this.timer); //End timing

Play Recording

innerAudioContext.src = this.voicePath; //Playback address (local address recorded above)
innerAudioContext.play();//play

Pause playback

innerAudioContext.pause();//Pause playback clearInterval(this.timer);//Clear timer

Submit recordings to the backend

//End recording and submit recording submitrecord: function() {
	this.count += 1; //This defines a global variable to prevent multiple submissions 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;
			//Initialization this.initialize()//I encapsulated a function to initialize the timer this.timer = this.timecount;
			this.show_recording = false;
			var data = JSON.parse(res.data);
			if (this.current == 0) {//Judge which column the audio is recorded in and insert it back 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: 'Submission successful!',
						icon: 'none',
						duration: 1200
				})
			},
			fail: (err) => {
				uni.hideLoading();
				uni.showToast({
					tilte: 'Upload failed~',
					icon: 'none',
					duration: 1200
				})
					return
				}
			});
		} else {
			console.log("Recording failed")
			uni.showToast({
				tilte: 'Recording failed',
				icon: 'none',
				duration: 1200
			})
			uni.hideLoading();
			this.show_recording = false;
			this.checkPermission()
			this.rerecord()
		}
	} else {
		uni.showToast({
			title: 'Please do not submit repeatedly',
			icon: 'none',
			duration: 2000
		})
	this.count=0;
	}
},

Re-recording

//Rerecord rerecord: function() {
				//Initialize the timer this.initialize()
				this.getTimeIntervalplus();//Start timing const options = {
					duration: 600000,
					sampleRate: 44100,
					numberOfChannels: 1,
					encodeBitRate: 192000,
					format: 'mp3',
					frameSize: 50
				}
				recorderManager.start(options);//Start recording },

onLoad part

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);
			});
		},

Timer

// Timer increment 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);
			},

Data section

data() {
			return {
				action: 'https://yl.letter-song.top/api/Uploads/uploadPicture', //Upload picture address textareavalue: '', //Text description value fileList2: [], //Return picture path 2
				fileList3: [], //Return image path 3
				fileList: [], //Return image path 1
				firsvideo: [], //Recording path 1
				secovideo: [], //Recording path 2
				thrivideo: [], //Recording path 3
				appointment_message: '', //appointment information passed from the previous page list: [{ //label table name: 'Past symptoms'
				}, {
					name: 'Recent symptoms'
				}, {
					name: 'This symptom',
				}],
				current: 0, //selected item sty: { //slider style height: '4px',
					borderRadius: '2rpx',
					borderTopLeftRadius: '10px',
					backgroundColor: '#3ECEB5'
				},
				activeItem: { //Selected item style color: '#333333',
					fontWeight: '600',
					fontSize: '36rpx',
				},
				show_recording: false, //Call up the recording pop-up window recordednum: 1, //1: Initial state 2. Recording state 3 End voicePath: '', //This audio recording path voiceDuration: '',
				timecount: '00:00:00',
				timecount2: "",
				hour: 0,
				minute: 0,
				second: 0,
				hour2: 0,
				minute2: 0,
				second2: 0,
				isZant: false,
				timer: '',
				yuming: 'This is the domain name',
				permiss: 0, //0 means enabling recording permission, 1 means enabling recording permission,
				count: 0
			}
		},

This is the end of this article about uniapp’s recording upload function. For more relevant uniapp recording upload content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • uniapp dynamic modification of element node style detailed explanation
  • Detailed explanation of uniapp painless token refresh method
  • How to use mqtt in uniapp project
  • Uniapp's experience in developing small programs
  • Ideas and codes for implementing waterfall flow layout in uniapp applet
  • Uniapp WeChat applet: Solution to key failure

<<:  MySQL and sqlyog installation tutorial with pictures and text

>>:  Analysis of the process of configuring Alibaba Cloud proxy warehouse based on Nexus

Recommend

Problems and solutions encountered when installing mininet on Ubuntu 16.04.4LTS

Mininet Mininet is a lightweight software defined...

Detailed explanation of grep and egrep commands in Linux

rep / egrep Syntax: grep [-cinvABC] 'word'...

Three properties of javascript objects

Table of contents 1. writable: writable 2. enumer...

CSS achieves footer "bottom absorption" effect

We often encounter this problem: how to use CSS t...

Analysis of several situations where MySQL index fails

1. Best left prefix principle - If multiple colum...

Some lesser-known sorting methods in MySQL

Preface ORDER BY 字段名升序/降序, I believe that everyon...

How to isolate users in docker containers

In the previous article "Understanding UID a...

Introduction to HTML for front-end developers

1 Introduction to HTML 1.1 First experience with ...

Deep understanding of the mechanism of CSS background-blend-mode

This article is welcome to be shared and aggregat...

Solution to changing the data storage location of the database in MySQL 5.7

As the data stored in the MySQL database graduall...

Tutorial on installing MYSQL8.0 on Alibaba Cloud ESC

Open the connection tool. I use MobaXterm_Persona...