Das WeChat-Applet implementiert die Aufnahmefunktion

Das WeChat-Applet implementiert die Aufnahmefunktion

In diesem Artikel wird der spezifische Code für das WeChat-Applet zur Implementierung der Aufnahmefunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Layout

<!--pages/Datensatz/Datensatz.wxml-->
<Ansicht>
 <Schaltfläche 
  Klasse = "tui-menu-list"
  bindtap="startRecordAac" 
  type="primary">Aufnahme starten (aac)</button>
 <Schaltfläche 
  Klasse = "tui-menu-list"
  bindtap="startRecordMp3" 
  type="primary">Aufnahme starten (mp3)</button>
 <Schaltfläche 
  Klasse = "tui-menu-list" 
  bindtap="Aufzeichnung stoppen" 
  type="primary">Aufnahme Ende</button>
 <Schaltfläche 
  Klasse = "tui-menu-list"
  bindtap="Aufzeichnung abspielen" 
  type="primary">Aufnahme abspielen</button>
</Ansicht>

Stil:

/* Seiten/Datensatz/Datensatz.wxss */
 
.tui-menu-list{
  Flex-Richtung: Reihe;
  Rand: 20 Rpx;
  Polsterung: 20rpx;
}

Starten und Stoppen der Aufnahme

// Seiten/Datensatz/Datensatz.js
Seite({
 
  /**
   * Ausgangsdaten der Seite */
  Daten: {
 
  },
 
  onLoad:Funktion (Optionen) {
    var das = dies
    this.recorderManager = wx.getRecorderManager();
    this.recorderManager.onError(Funktion () {
      that.tip("Aufnahme fehlgeschlagen!");
    })
    this.recorderManager.onStop(Funktion (res) {
      dass.setData({
        src:res.tempDateipfad
      })
      console.log(res.tempFilePath)
      that.tip("Aufnahme abgeschlossen!")
    })
    dies.innerAudioContext = wx.createInnerAudioContext()
    dies.innerAudioContext.onError((res) => {
      that.tip("Die Wiedergabe der Aufnahme ist fehlgeschlagen!")
    })
  },
 
  //Tipp:Funktion (Nachricht) {
    wx.showModal({
      Farbe abbrechen: 'Farbe abbrechen',
      Titel: „Tipps“,
      Inhalt:Nachricht,
      anzeigenAbbrechen:false
    })
  },
 
  //AAC aufzeichnen
  startRecordAac:Funktion () {
    dieser.recorderManager.start({
      Format: „aac“
    })
  },
 
  //MP3 aufnehmen
  startRecordMp3:Funktion () {
    dieser.recorderManager.start({
      Format: „mp3“
    })
  },
 
  //Aufnahme stoppen stopRecord:function () {
    dies.recorderManager.stop()
  },
 
  //Aufnahme abspielenplayRecord:function () {
    var das = dies
    var src = diese.Daten.src
    wenn (src='') {
      this.tip('Bitte zuerst aufzeichnen')
      zurückkehren
    }
    dies.innerAudioContext.src = dies.data.src
    dies.innerAudioContext.play()
  }
 
  
})

Effektbild:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Aufzeichnungs- und Uploadfunktion des WeChat-Applets (mithilfe eines Knotens zum Parsen und Empfangen)
  • WeChat-Applet realisiert Aufnahmefunktion
  • WeChat-Applet zum Erzielen eines Mikrofonanimationseffekts beim Aufzeichnen
  • Probleme und Lösungen beim WeChat-Applet-Aufzeichnungsdateiformat Silk
  • Aufnahme- und Wiedergabefunktion des WeChat-Applets
  • Beispiel für die Audiowiedergabeanimation eines WeChat-Applet-Entwicklungsrecorders (echte Maschine verfügbar)
  • WeChat-Applet - Bilder, Aufnahmen, Audiowiedergabe, Musikwiedergabe, Videos, Dateien Codebeispiele

<<:  Interpretation von syslogd- und syslog.conf-Dateien unter Linux

>>:  Einfaches Schreiben von gespeicherten MySQL-Prozeduren und -Funktionen

Artikel empfehlen

JavaScript-HTML zur Implementierung der mobilen Red Envelope Rain-Funktionsseite

In diesem Artikelbeispiel wird der spezifische HT...

Trash-Cli: Befehlszeilen-Papierkorb-Tool unter Linux

Ich glaube, jeder kennt den Papierkorb, da er bei...

Lösen Sie das Problem der leeren Lücke am unteren Rand des Img-Bildes

Bei der Arbeit an einem aktuellen Projekt habe ic...

Wissen Sie, warum Vue-Daten eine Funktion sind?

Erklärung auf der offiziellen Website: Wenn eine ...

Implementierung eines laufenden Springboot-Projekts mit Docker

Einführung: Die Konfiguration von Docker, auf dem...

Seltsame und interessante Docker-Befehle, die Sie vielleicht nicht kennen

Einleitung Stellt einige einfache und praktische ...

Analyse des Implementierungsprozesses der Docker-Container-Orchestrierung

In tatsächlichen Entwicklungs- oder Produktionsum...

So stellen Sie das Crownblog-Projekt mit Docker in der Alibaba Cloud bereit

Front-End-Projektpaketierung Suchen Sie .env.prod...

JavaScript zum Erreichen eines einfachen Seiten-Countdowns

In diesem Artikelbeispiel wird der spezifische Ja...

MySQL Order By-Codebeispiel für Sortierregeln für mehrere Felder

Sag es im Voraus Aus einer Laune heraus möchte ic...

So benennen Sie unter Linux eine Gruppe von Dateien auf einmal um

Unter Linux verwenden wir normalerweise den Befeh...