uni-app Einführung uni-app ist ein Front-End-Framework zur Entwicklung plattformübergreifender Anwendungen mit Vue.js. HTML-TeilIch habe ein Aufnahmebild geschrieben, bei dem beim Klicken eine Popup-Ebene angezeigt wird (im Stil von QQ). Ich werde nicht näher auf den Schreibstil eingehen, den kennt jeder. js-TeilDas ist der springende Punkt!!! Erstellen einer InstanzUm das Gesamtbild zu erhalten, können Sie die Aufnahme jederzeit starten und stoppen. Ich habe es in das Gesamtbild eingefügt. const recorderManager = uni.getRecorderManager();//Eine Aufnahmeinstanz erstellen const innerAudioContext = uni.createInnerAudioContext();//Instanz, die für die Wiedergabe verwendet wird // Um zu verhindern, dass das iPhone stummgeschaltet wird und nicht abgespielt werden kann uni.setInnerAudioOption({ obeyMuteSwitch: false }) innerAudioContext.autoplay = true; Standard exportieren { Aufnahme startenthis.timecount = '00:00:00'; //Aufnahmezeit initialisieren this.hour = 0; diese.Minute = 0; diese.Sekunde = 0; this.getTimeIntervalplus(); //Einen Timer einkapseln, aufrufen um die Zeitmessung zu starten const options = { //Parameter Dauer: 600000, Beispielrate: 44100, Anzahl der Kanäle: 1, encodeBitRate: 192000, Format: 'mp3', Rahmengröße: 50 } recorderManager.start(Optionen); Aufzeichnung beendenOb Sie die Mindestdauer begrenzen müssen, können Sie selbst entscheiden. Ich habe es hier nicht geschrieben. recorderManager.stop(); //Aufnahme beenden clearInterval(this.timer); //Zeitmessung beenden Aufnahme abspieleninnerAudioContext.src = this.voicePath; //Wiedergabeadresse (lokale Adresse, die oben aufgezeichnet wurde) innerAudioContext.play();//abspielen Wiedergabe pausiereninnerAudioContext.pause();//Wiedergabe pausieren clearInterval(this.timer);//Timer löschen Aufnahmen an das Backend übermitteln//Aufnahme beenden und Aufnahme übermitteln submitrecord: function() { this.count += 1; //Dies definiert eine globale Variable, um mehrere Übermittlungen zu verhindern, if (this.count == 1){ Konsole.log(dieser.Anzahl); var https = getApp().globalData.https; wenn (diese.aufgezeichneteNummer == 2) { diese.aufgezeichneteNummer = 3; recorderManager.stop(); : ClearInterval(dieser.Timer); } wenn (dieser.voicePath != '') { Konsole.log(dieser.voicePath); uni.uploadFile({ URL: https + 'Uploads/uploadVoiceVideo', Dateipfad: dieser.Sprachpfad, Name: "Datei", Erfolg: (res) => { dies.Anzahl = 0; //Initialisierung this.initialize()//Ich habe eine Funktion zum Initialisieren des Timers gekapselt this.timer = this.timecount; diese.show_recording = falsch; var Daten = JSON.parse(res.data); if (this.current == 0) {//Beurteilen, in welcher Spalte der Ton aufgezeichnet ist, und wieder einfügen this.firsvideo.push(data.address); } sonst wenn (dieser.aktuell == 1) { this.secovideo.push(Daten.Adresse); Konsole.log(dieses.secovideo); } sonst wenn (dieser.aktuell == 2) { this.thrivideo.push(Daten.Adresse); } uni.showToast({ Titel: „Übermittlung erfolgreich!“, Symbol: „keine“, Dauer: 1200 }) }, fehlgeschlagen: (Fehler) => { uni.hideLoading(); uni.showToast({ Titel: „Hochladen fehlgeschlagen~“, Symbol: „keine“, Dauer: 1200 }) zurückkehren } }); } anders { console.log("Aufzeichnung fehlgeschlagen") uni.showToast({ Titel: 'Aufnahme fehlgeschlagen', Symbol: „keine“, Dauer: 1200 }) uni.hideLoading(); diese.show_recording = falsch; dies.checkPermission() dies.rerecord() } } anders { uni.showToast({ Titel: 'Bitte nicht mehrfach absenden', Symbol: „keine“, Dauer: 2000 }) dies.Anzahl=0; } }, Neuaufnahme//Neu aufzeichnen neu aufzeichnen: function() { //Initialisiere den Timer this.initialize() this.getTimeIntervalplus();//Zeitmessung starten const options = { Dauer: 600000, Beispielrate: 44100, Anzahl der Kanäle: 1, encodeBitRate: 192000, Format: 'mp3', Rahmengröße: 50 } recorderManager.start(Optionen);//Aufnahme starten }, onLoad-Teilbeim Laden(Option) { var Terminnachricht = Option.Terminnachricht; Terminnachricht = JSON.parse(Terminnachricht); this.appointment_message = Terminnachricht; lass das = dies; recorderManager.onStop(Funktion(res) { console.log('Rekorder stoppen' + JSON.stringify(res)); that.voiceDuration = res.duration; that.voicePath = res.tempFilePath; konsole.log(res); }); }, Timer// Timer-Inkrement getTimeIntervalplus() { : ClearInterval(dieser.Timer); dieser.timer = setzeInterval(() => { diese.Sekunde += 1; wenn (diese.Sekunde >= 60) { diese.minute += 1; diese.Sekunde = 0; } wenn (diese.Minute >= 10) { diese.aufgezeichneteNummer = 3; recorderManager.stop(); : ClearInterval(dieser.Timer); } diese.Sekunde2 = diese.Sekunde; diese.Minute2 = diese.Minute; this.timecount = this.showNum(this.hour) + ":" + this.showNum(this.minute) + ":" + this .showNum(diese.Sekunde); - console.log("dieser.Zeitzähler", dieser.Zeitzähler) }, 1000); }, Abschnitt „Daten“Daten() { zurückkehren { Aktion: 'https://yl.letter-song.top/api/Uploads/uploadPicture', //Bildadresse hochladen textareavalue: '', //Textbeschreibungswert fileList2: [], //Bildpfad 2 zurückgeben fileList3: [], //Gibt Bildpfad 3 zurück fileList: [], //Bildpfad 1 zurückgeben firsvideo: [], //Aufnahmepfad 1 secovideo: [], //Aufnahmepfad 2 thrivideo: [], //Aufnahmepfad 3 appointment_message: '', //Termininformationen von der vorherigen Seite weitergegeben list: [{ //Name der Beschriftungstabelle: 'Frühere Symptome' }, { Name: „Neueste Symptome“ }, { Name: 'Dieses Symptom', }], aktuell: 0, //ausgewähltes Element sty: { //Schiebereglerstilhöhe: '4px', Rahmenradius: '2rpx', borderTopLeftRadius: '10px', Hintergrundfarbe: '#3ECEB5' }, activeItem: { //Ausgewählte Elementstilfarbe: '#333333', Schriftgröße: '600', Schriftgröße: '36rpx', }, show_recording: false, //Aufnahme-Popup-Fenster aufrufen recordednum: 1, //1: Ausgangszustand 2. Aufnahmezustand 3 Ende voicePath: '', //Dieser Audio-Aufnahmepfad voiceDuration: '', Zeitzählung: '00:00:00', timecount2: "", Stunde: 0, Minute: 0, Sekunde: 0, Stunde2: 0, Minute2: 0, Sekunde2: 0, isZant: falsch, Timer: '', yuming: 'Dies ist der Domänenname', Permiss: 0, //0 bedeutet Aufnahmeerlaubnis aktivieren, 1 bedeutet Aufnahmeerlaubnis aktivieren, Anzahl: 0 } }, Dies ist das Ende dieses Artikels über die Aufnahme-Upload-Funktion von Uniapp. Weitere relevante Inhalte zum Aufnahme-Upload von Uniapp finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: MySQL- und SQLYog-Installationstutorial mit Bildern und Text
>>: Analyse des Prozesses zur Konfiguration des Alibaba Cloud-Proxy-Warehouses basierend auf Nexus
In Projekten kommt es häufig vor, dass eine Liste...
Die Installation der Dekomprimierungsversion von ...
Details zur MySQL-Triggersyntax: Ein Trigger ist ...
Bei MySQL-Datenbankoperationen hoffen wir immer, ...
Problembeschreibung Wenn filter im body verwendet...
Es ist auch sehr einfach, Django-Projekte mit Doc...
Dieses Tutorial beschreibt die Installation der M...
Wenn Sie Alibaba Cloud Server verwenden, müssen S...
Inhaltsverzeichnis einführen Beispiel Zusammenfas...
1. Suchen Sie das MySQL-Image Docker PS 2. Geben ...
Der Standardtabellenname ist „base_data“ und der ...
Der Dienst des Unternehmens verwendet Docker und ...
Vorwort Kürzlich habe ich den Startvorgang von To...
Inhaltsverzeichnis Prototypenkette Wir können ein...
Laden Sie zunächst das Installationspaket von der...