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

Detaillierte Erläuterung des Falls des JavaScript-Upload-Dateilimitparameters

Projektszenario: 1. Einschränkungen beim Hochlade...

HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf

<br />Die Kopfzeile bezieht sich auf die ers...

Docker-Konfiguration Alibaba Cloud Container Service-Betrieb

Konfigurieren des Alibaba Cloud Docker Container ...

So zeigen Sie den Speicherort von MySQL-Datendateien an

Wir haben möglicherweise eine Frage: Nachdem wir ...

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Frage Nach dem Nginx-Reverse-Proxy erhält die Tom...

Linux löscht automatisch Protokolle und Beispielbefehle von vor n Tagen

1. Befehl zum Löschen von Dateien: Suche das ents...

Vue imitiert den Formularbeispielcode von ElementUI

Implementierungsanforderungen Das ElementUI imiti...

Verwenden von Nginx zum Implementieren der Graustufenversion

Unter Graustufenfreigabe versteht man eine Freiga...

Reines CSS zum Ändern der Farbe des Bildes

Die CSS-Technik zum Ändern der Farbe eines Bildes...