Wir haben verschiedene Themen zu GitHub, Hacker News und Reddit zu Audiovisualisierungstools untersucht. Wir sprechen über die oft erwähnten offenen Bibliotheken und Lösungen, die für Entwickler von Webanwendungen oder Spielen nützlich sind.
Foto Pixabay / Pixabay Lizenz- Pizzicato . Für die Arbeit mit Audioinhalten in Browsern wird die vom W3C- Konsortium entwickelte Web-Audio- Spezifikation verwendet . Die Web Audio API verfügt über 28 Schnittstellen zum Filtern, Visualisieren und Verwalten von Audiokanälen. Die Pizzicato JavaScript-Bibliothek erweitert diese Funktionalität - Sie können Melodien ( Tremolo , Reverb , Quadrafuzz- Verzerrungseffekt) mehr Effekte hinzufügen und neue Kompositionen basierend auf einzelnen Sounds erstellen . Der Autor der Bibliothek präsentierte ein Projekt , das seine Fähigkeiten demonstrierte. Diese Anwendung spielt eine Melodie ab, die von der Anzahl der Commits der GitHub-Benutzer abhängt.
- Processing.js . Eine Bibliothek zur Implementierung der Grundfunktionen der Verarbeitungssprache. Es wurde 2001 entwickelt, um Daten im Web zu visualisieren. Heute wird es von Tausenden von Künstlern, Designern und Entwicklern verwendet, auch für die Audiovisualisierung . Die Bibliothek verwendet JS für die Animation und Canvas für die Arbeit mit Bildern. Zwei Bücher (PDF) der Autoren helfen dabei, die Merkmale der Sprache zu untersuchen - " Verarbeitung: Ein Programmierhandbuch " und " Erste Schritte mit der Verarbeitung ".
- Peaks.js . Dies ist eine JavaScript-Komponente zum Anzeigen und Interagieren mit Schallwellendiagrammen. Diagramme können skaliert und mit verschiedenen farbsemantischen Teilen wie Sprache und Musik markiert werden. Die Bibliothek wurde von Experten der BBC entwickelt, sie verwendeten die Canvas-Komponente aus HTML5. Peaks.js kann nur Diagramme zeichnen, die auf vorgefertigten Daten basieren, und diese auf der Site-Seite platzieren. Wenn Sie eine Schallwelle erzeugen müssen, können Sie sich an andere Tools aus dem BBC-Ökosystem wenden: Wellenformdaten für JS, Audiowellenform für C ++ und Audiowellenform für Ruby.
Foto von Jason Corey / CC BY- p5.js. Dies ist die Visualisierungsbibliothek, die das Verarbeitungsteam 2014 erstellt hat. Sie können mit Code „zeichnen“ (Kunstelemente und Animationen erstellen), wobei die Seite im Browser als Zeichenfläche fungiert. P5.js verfügt über zusätzliche Bibliotheken für die Integration mit anderen HTML5-Objekten - Text, Video, Audio oder Bilder von einer Webcam. Auf der offiziellen Website des Projekts befindet sich ein Editor, in dem Sie alle Funktionen des Tools bewerten können.
- pixi.js. Eine 2D-Rendering-Engine basierend auf Canvas und WebGL, die Texturen und Sprites unterstützt. Die Autoren der Bibliothek positionieren sie als Analogon zu Three.js, sodass sie zur Erstellung komplexer grafischer Oberflächen (z. B. Musikplayer) und Visualisierungen geeignet ist. Eine Demo mit den „musikalischen“ Funktionen von pixi.js finden Sie auf der Codepen-Website (Sie müssen Musik von Ihrem Computer herunterladen).
- skizze.js . Eine winzige Bibliothek zum Erstellen von Kunstobjekten in JavaScript - sie wiegt nur zwei Kilobyte. Alle Zeichenmethoden CanvasRenderingContext2D, WebGLRenderingContext und HTMLElement werden unterstützt. Auf der offiziellen Website finden Sie einige Beispiele für Visualisierungen, die mithilfe von Skizzen implementiert wurden. Die Dokumentation mit allen notwendigen Informationen, um mit dem Tool zu beginnen, befindet sich auf GitHub .
- Two.js. Universelle API zum Zeichnen in Canvas, SVG oder WebGL mit einer Verzerrung in Vektorgrafiken. Geeignet für die Arbeit in einer kopflosen Umgebung und in der Cloud. Implementierungsbeispiele finden Sie hier .
- Audio-Wellenform Eine Anwendung für Linux und Mac OSX (Windows wird noch nicht unterstützt), die über die Befehlszeile arbeitet und Wellenformdaten basierend auf Audioaufnahmen (in den Formaten MP3, WAV, FLAC oder OGG) generiert. Zu diesem Zweck bildet die Anwendung eine Monospur und berechnet dann den minimalen und maximalen Wert der Samples. Daten werden in den Formaten JSON, dat oder PNG gespeichert. Nachdem sie in die Bibliothek übertragen werden können, die ein Diagramm der Schallwelle auf der Site anzeigt, z. B. die bereits erwähnten Peaks.js.
Foto Pixabay / Pixabay Lizenz- Kreisförmige Audiowelle . JS-Bibliothek, die Schallwellen in Form eines kreisförmigen Graphen visualisiert. Um sie zu erstellen, werden ECharts sowie Daten zu Frequenzen und BPM- Melodien verwendet. Demos finden Sie hier und hier .
- Asche . C ++ - Framework für die Bilderzeugung, das als Konkurrent für Processing.js erstellt wurde. Das Tool ermöglicht die Arbeit mit 2D- und 3D-Grafiken, verfügt über integrierte Decoder für WAV, MP3 und OGG sowie digitale Signalverarbeitungsfunktionen (z. B. Normalisierungsblöcke und Berechnung von Effektivwerten).
- 3D Music Visualizer . Ein einfacher Visualizer, der auf Three.js und der Web Audio API basiert und trigonometrische Funktionen zum Erstellen von Formen verwendet. Ein Arbeitsbeispiel finden Sie hier . Das Projekt kann als Referenz beim Erstellen eines eigenen "mathematischen" Visualisierers verwendet werden.
Am 18. Juni beginnt der Verkauf von Geräten bei Audiomania. Wir bieten Vinyl-Player, Stereoverstärker, Bücherregal- und Standlautsprecher sowie In-Ear-Kopfhörer mit großen Rabatten von bis zu 70%. Zum Beispiel können Polk Audio S10- Lautsprecher für 14.900 Rubel und Audio-Technica ATH-E40- Kopfhörer für 6.490 Rubel aufgenommen werden.
Hot AUDIOSALE 2019 ist eine großartige Gelegenheit, ein Audio-Gadget zu kaufen, das Sie schon lange gesehen haben.
Unsere anderen Kollektionen:
Wo Sie Audiobeispiele für Ihre Projekte erhalten: eine Auswahl von neun thematischen Ressourcen 12 thematische Ressourcen mit Titeln, die unter Creative Commons lizenziert sind Eine Auswahl von Online-Shops mit hochauflösender Musik
Was war auf dem ersten iPod: zwanzig Alben, die Steve Jobs 2001 ausgewählt hat Wir haben uns zurückgezogen - wir diskutieren über einst beliebte Audio-Gadgets, die bereits "veraltet" sind.