So erfassen Sie Audio mithilfe der MediaStream -API

Dieses Tutorial zeigt, dass das Erstellen einer Webanwendung für Audioaufzeichnungen und serverseitiger Speicher mithilfe der Medienerfassung und Streams-API (MediaStream API) erstellt wird. Benutzer zeichnen Audio auf, speichern Sie es auf dem Server und sehen/spielen gespeicherte Aufnahmen an. Die serverseitig wird mit node.js und express implementiert, während die clientseitige Seite HTML, CSS (Bootstrap) und JavaScript verwendet.

Schlüsselmerkmale:

• clientseitige Aufzeichnung: Die MediaStream-API übernimmt Mikrofonzugriff und Audioaufzeichnung. Eine einfache Schnittstelle mit einer Datensatzstaste steuert den Vorgang.
• serverseitiger Speicher: a node.js/Express-Server mit Multer Middleware verwaltet Audiodatei-Uploads und Speicher in einem bestimmten Verzeichnis.
• Wiedergabe und Verwaltung: Benutzer können ihre gespeicherten Aufnahmen direkt von der Webseite abspielen. Eine Verrückungsoption ermöglicht das Löschen von Aufnahmen.

Server -Setup (Node.js & Express):

1. Projektinitialisierung: Erstellen Sie ein Projektverzeichnis, initialisieren Sie NPM (npm init -y) und installieren Sie Abhängigkeiten (npm i express nodemon multer).
2. Servererstellung (index.js): Ein grundlegender Expressserver wird erstellt, um Routing- und Datei -Uploads zu verarbeiten.
3. Multer -Integration: Multer Middleware ist so konfiguriert, dass Datei -Uploads verarbeitet werden und sie im Verzeichnis uploads mit Zeitstempeln für eindeutige Dateinamen speichern.
4. API -Endpunkte: Zwei API -Endpunkte werden definiert: /record (Beitrag) zum Hochladen von Aufnahmen und /recordings (GET) zum Abrufen einer Liste gespeicherter Aufnahmen.
5. Server Start: Der Server wird mit npm start.
gestartet

Aufzeichnungsseite (Client-Seite):

1. HTML -Struktur: Eine HTML -Seite (public/index.html) wird mit einer Datensatzstaste, einem Audio -Player -Container und einem Container zum Anzeigen gespeicherter Aufzeichnungen erstellt. Bootstrap wird zum Styling verwendet.
2. CSS -Styling (public/assets/css/index.css): CSS -Stile die Schnittstellenelemente.
3. JavaScript -Logik (public/assets/js/record.js): JavaScript verarbeitet die Benutzerinteraktion, die Aufzeichnung von getUserMedia und das Hochladen mithilfe der Fetch -API. Ereignishörer verwalten die Aufnahme von Start/Stop, Speichern, Verwerfen und Wiedergabe.

Workflow:

1. Benutzer klickt auf die Schaltfläche "Aufzeichnung".
2. Die Browser -Eingabeaufforderungen für den Mikrofonzugriff.
3. Auf der Erlaubnis beginnt die Audioaufzeichnung.
4. Beim Stop wird die Aufnahme als Blob gespeichert.
5. Der Benutzer kann die Aufzeichnung speichern oder verwerfen.
6. gespeicherte Aufzeichnungen werden über den /record -Dendpunkt auf den Server hochgeladen.
7. Der /recordings Endpunkt ruft eine Liste gespeicherter Dateien für die Anzeige auf der Seite ab.

Schlussfolgerung:

Dieses Tutorial bietet einen umfassenden Leitfaden zum Erstellen einer funktionalen Audioaufzeichnungsanwendung. Die Verwendung der Medienstream-API und einer gut strukturierten serverseitigen Komponente sorgt für eine robuste und benutzerfreundliche Erfahrung. Weitere Verbesserungen könnten erweiterte Funktionen wie Dateivalidierung, Benutzerauthentifizierung und verbesserte UI -Elemente umfassen.

FAQs über die Medienstream -API:

• Was ist die Medienstream -API?
Wie funktioniert es?
• Audio- und Videounterstützung? unterstützt beide.
• Videoaufnahme? verwenden
, um auf die Kamera zuzugreifen.
• Bildschirmfreigabe? getUserMedia möglich, erfordert jedoch möglicherweise zusätzliche Browser -Berechtigungen.

Das obige ist der detaillierte Inhalt vonSo erfassen Sie Audio mithilfe der MediaStream -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!