Wie man AudioBuffer mit JavaScript und WebSockets an Lautsprecher sendet

Описание: Erfahren Sie, wie Sie Audio von einem WebSocket-Server über JavaScript's AudioContext und AudioWorkletProcessor an die Lautsprecher Ihres Computers senden.
---
Dieses Video basiert auf der Frage https://stackoverflow.com/q/62271985/ gestellt von dem Nutzer 'Len White' ( https://stackoverflow.com/u/1779770/ ) sowie auf der Antwort https://stackoverflow.com/a/62284557/ bereitgestellt von dem Nutzer 'Len White' ( https://stackoverflow.com/u/1779770/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge.

Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: Send AudioBuffer to Speaker

Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/l...
Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ).

Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com.
---
Wie man AudioBuffer mit JavaScript und WebSockets an Lautsprecher sendet

Wenn Sie mit Audio in Webanwendungen arbeiten, sind Sie möglicherweise auf die Herausforderung gestoßen, Audiodaten nach der Verarbeitung durch einen AudioWorkletProcessor an Lautsprecher zu senden. Dieser Blogbeitrag, basierend auf einem realen Szenario, erklärt, wie Sie dies mit klaren Schritten und Codebeispielen erreichen.

Das Problem

Lassen Sie uns den von Ihnen eingerichteten Ablauf aufschlüsseln:

Sie erfassen Mikrofon-Audio und senden es an einen AudioWorkletProcessor.

Der Prozessor sendet die Audiodaten per WebSocket an einen Server.

Der Server gibt diese Daten zurück.

Sie möchten diese zurückgegebenen Audiodaten über die Lautsprecher Ihres Computers abspielen.

Während die ersten drei Schritte einwandfrei funktionieren, ist der vierte Schritt – das Abspielen des Audios über die Lautsprecher – der Punkt, an dem die meisten Entwickler stecken bleiben. Lassen Sie uns genauer ansehen, wie Sie dieses Problem lösen.

Die Lösung

Um Audio zu spielen, das vom WebSocket empfangen wurde, müssen Sie folgende wesentliche Schritte befolgen:

Schritt 1: Einrichten des AudioContexts

Sie haben bereits den AudioContext und den AudioWorkletNode eingerichtet, der den Mikrofoneingang verarbeitet. Hier ist eine vereinfachte Version Ihrer Einrichtung:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Schritt 2: Audio durch den Worklet verarbeiten

Ihr AudioWorkletProcessor sendet Audiodaten an einen WebSocket, was wie erwartet funktioniert:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Schritt 3: Audiodaten über WebSocket empfangen

Hier liegt der eigentliche Knackpunkt. Sie möchten die vom WebSocket-Server zurückerhaltenen Audiodaten abspielen. So können Sie es tun:

Verwenden Sie Float32Array, um das vom WebSocket empfangene ArrayBuffer zu interpretieren.

Erstellen Sie mit dem AudioContext einen AudioBuffer.

Spielen Sie ihn über einen BufferSourceNode ab.

Hier ist der Code dazu:

[[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]]

Zusammenfassung

In diesem Blogbeitrag haben wir die Herausforderungen gemeistert, Audiodaten, die von einem WebSocket-Server empfangen wurden, mit JavaScript an die Lautsprecher eines Computers zu senden. Wir haben die Einrichtung und Integration von AudioContext, AudioWorklet und die Wiedergabefunktion behandelt.

Denken Sie daran, dass die Integration von Audio in Webanwendungen komplex sein kann, aber die Aufteilung in überschaubare Schritte macht das Vorgehen einfacher.

Mit dieser Anleitung sollten Sie in der Lage sein, Ihre Audiomanipulationen weiter auszubauen und gegebenenfalls neue Audioverarbeitungstechniken auszuprobieren!