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
Problem mit der Mysql-Connector-Java-Treiberversi...
Inhaltsverzeichnis 1. Index-Grundlagen 1.1 Einlei...
Vorwort Als ich zuvor „defineProperty“ vorgestell...
Erhalten Sie tägliche Statistiken Wenn Sie ein Pr...
Bedürfnisse entdecken Wenn nur ein Teil eines Ber...
In diesem Artikel wird der spezifische Prozess de...
Was sind Slots? Wir wissen, dass in Vue nichts in...
Das Hauptsymptom des Konflikts besteht darin, dass...
Ich habe kürzlich an einem Projekt gearbeitet – Bu...
Heute habe ich bei der Verwendung von SVG in der ...
Bevor der Pfeil abgeschossen wurde, flüsterte der...
Inhaltsverzeichnis Problembeschreibung Ursachenan...
Idea importiert ein bestehendes Webprojekt und ve...
1. Warum maxPostSize festlegen? Der Tomcat-Contai...
Installieren Geben Sie zur Installation den folge...