uni-app Introduction uni-app is a front-end framework for developing cross-platform applications using Vue.js. HTML partI wrote a recording image that pops up a pop-up layer when clicked (imitating the style of QQ) I won't go into details about how to write the style, everyone knows it. js partThis is the key point!!! Create an instanceIn 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 recordingthis.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); End recordingIf 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 RecordinginnerAudioContext.src = this.voicePath; //Playback address (local address recorded above) innerAudioContext.play();//play Pause playbackinnerAudioContext.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 partonLoad(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 sectiondata() { 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:
|
<<: MySQL and sqlyog installation tutorial with pictures and text
>>: Analysis of the process of configuring Alibaba Cloud proxy warehouse based on Nexus
Mininet Mininet is a lightweight software defined...
Table of contents Add traffic function to github+...
Table of contents First step installation Step 2:...
rep / egrep Syntax: grep [-cinvABC] 'word'...
Table of contents 1. writable: writable 2. enumer...
Step 1: Configure environment variables (my decom...
We often encounter this problem: how to use CSS t...
1. Best left prefix principle - If multiple colum...
Preface ORDER BY 字段名升序/降序, I believe that everyon...
In the previous article "Understanding UID a...
1 Introduction to HTML 1.1 First experience with ...
This article is welcome to be shared and aggregat...
As the data stored in the MySQL database graduall...
Open the connection tool. I use MobaXterm_Persona...
Table of contents Observer Pattern Vue pass value...