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

Introduction to MySQL role functions

Table of contents Preface: 1. Introduction to rol...

Bundling non-JavaScript static resources details

Table of contents 1. Custom import in packaging t...

Docker implements cross-host container communication based on macvlan

Find two test machines: [root@docker1 centos_zabb...

VMware Workstation 14 Pro installation Ubuntu 16.04 tutorial

This article records the specific method of insta...

Native JavaScript to achieve slide effects

When we create a page, especially a homepage, we ...

mysql zip file installation tutorial

This article shares the specific method of instal...

mysql 8.0.15 winx64 decompression version graphic installation tutorial

Every time after installing the system, I have to...

Summary of frequently used commands for Linux file operations

0. New operation: mkdir abc #Create a new folder ...