Bibliothèques ouvertes pour la visualisation du contenu audio

Nous avons étudié plusieurs sujets sur GitHub, Hacker News et Reddit sur les outils de visualisation audio. Nous parlons des bibliothèques ouvertes et des solutions souvent mentionnées qui sont utiles aux développeurs d'applications Web ou de jeux.


Licence photo Pixabay / Pixabay

  • Pizzicato . Pour travailler avec du contenu audio dans les navigateurs, la spécification Web Audio , développée par le consortium W3C, est utilisée . L'API Web Audio dispose de 28 interfaces pour filtrer, visualiser et gérer les canaux audio. La bibliothèque JavaScript de Pizzicato étend cette fonctionnalité en vous permettant d'ajouter plus d'effets aux mélodies ( trémolo , réverbération , effet de distorsion quadrafuzz ) et de créer de nouvelles compositions basées sur des sons individuels. L'auteur de la bibliothèque a présenté un projet démontrant ses capacités - cette application joue une mélodie en fonction du nombre de commits d'utilisateurs de GitHub.
  • Processing.js . Une bibliothèque pour implémenter les fonctions de base du langage de traitement. Il a été développé en 2001 pour visualiser les données sur le Web. Aujourd'hui, il est utilisé par des milliers d'artistes, designers et développeurs, y compris pour la visualisation audio . La bibliothèque utilise JS pour l'animation et canvas pour travailler avec les images. Deux livres (PDF) de ses auteurs aideront à étudier les caractéristiques du langage - " Processing: A Programming Handbook " et " Getting Started with Processing ".
  • Peaks.js . Il s'agit d'un composant JavaScript permettant d'afficher et d'interagir avec des graphiques d'ondes sonores. Les graphiques peuvent être mis à l'échelle et marqués avec des parties sémantiques de différentes couleurs, telles que la parole et la musique. La bibliothèque a été développée par des experts de la BBC, ils ont utilisé le composant canvas de HTML5. Peaks.js peut uniquement dessiner des graphiques basés sur des données prêtes à l'emploi et les placer sur la page du site. Si vous devez générer une onde sonore, vous pouvez vous tourner vers d'autres outils de l'écosystème BBC: waveform-data pour JS, audiowaveform pour C ++ et audio_waveform pour Ruby.


Photo de Jason Corey / CC BY

  • p5.js. Il s'agit de la bibliothèque de visualisation que l'équipe de traitement a créée en 2014. Il vous permet de «dessiner en utilisant du code» (créer des éléments artistiques et des animations), où la page dans le navigateur agit comme un canevas. P5.js possède des bibliothèques supplémentaires pour l'intégration avec d'autres objets HTML5 - texte, vidéo, audio ou capture d'images à partir d'une webcam. Il y a un éditeur sur le site officiel du projet dans lequel vous pouvez évaluer toutes les fonctionnalités de l'outil.
  • pixi.js. Un moteur de rendu 2D basé sur canvas et WebGL, qui prend en charge les textures et les sprites. Les auteurs de la bibliothèque le positionnent comme un analogue de Three.js, il convient donc pour créer des interfaces graphiques complexes (par exemple, des lecteurs de musique) et des visualisations. Une démo avec les fonctionnalités «musicales» de pixi.js est disponible sur le site Web de codepen (vous devez télécharger de la musique depuis votre ordinateur).
  • sketch.js . Une petite bibliothèque pour créer des objets d'art en JavaScript - elle ne pèse que deux kilo-octets. Toutes les méthodes de dessin CanvasRenderingContext2D, WebGLRenderingContext et HTMLElement sont prises en charge. Sur le site officiel, vous trouverez plusieurs exemples de visualisations implémentées à l'aide de sketch. La documentation avec toutes les informations nécessaires pour démarrer avec l'outil est sur GitHub .
  • Two.js. API universelle pour dessiner dans Canvas, SVG ou WebGL avec un biais dans les graphiques vectoriels. Convient pour travailler dans un environnement sans tête et dans le cloud. Des exemples d'implémentation sont disponibles ici .
  • Forme d'onde audio Une application pour Linux et Mac OSX (Windows n'est pas encore pris en charge) qui fonctionne à partir de la ligne de commande et génère des données de forme d'onde basées sur des enregistrements audio (aux formats MP3, WAV, FLAC ou OGG). Pour ce faire, l'application forme une piste mono, puis calcule la valeur minimale et maximale des échantillons. Les données sont enregistrées au format JSON, dat ou PNG. Après, ils peuvent être transférés à la bibliothèque, qui affiche un graphique de l'onde sonore sur le site, par exemple, le Peaks.js déjà mentionné.


Licence photo Pixabay / Pixabay

  • Onde audio circulaire . Bibliothèque JS qui visualise les ondes sonores sous la forme d'un graphique circulaire. Pour les construire, ECharts est utilisé, ainsi que des données sur les fréquences et les morceaux BPM . Des démos peuvent être trouvées ici et ici .
  • Cinder . Framework C ++ pour la génération d'images, créé en tant que concurrent pour Processing.js. L'outil vous permet de travailler avec des graphiques 2D et 3D, a des décodeurs intégrés pour WAV, MP3 et OGG, ainsi que des fonctions de traitement du signal numérique (par exemple, des blocs de normalisation et le calcul des valeurs efficaces).
  • Visualiseur de musique 3D . Un visualiseur simple basé sur Three.js et une API Web Audio qui utilise des fonctions trigonométriques pour créer des formes. Un exemple de travail peut être trouvé ici . Le projet peut être utilisé comme référence lors de la création de votre propre visualiseur "mathématique".



Le 18 juin, la vente des équipements commence chez Audiomania. Nous offrons des lecteurs de vinyle, des amplificateurs stéréo, des haut-parleurs d'étagère et de sol, ainsi que des écouteurs intra-auriculaires avec des remises allant jusqu'à 70%. Par exemple, les haut-parleurs Polk Audio S10 peuvent être achetés pour 14 900 roubles et les écouteurs Audio-Technica ATH-E40 pour 6 490 roubles.

Hot AUDIOSALE 2019 est une excellente occasion d'acheter un gadget audio que vous regardez depuis longtemps.



Nos autres collections:

Où obtenir des échantillons audio pour vos projets: une sélection de neuf ressources thématiques
12 ressources thématiques avec des pistes sous licence Creative Commons
Une sélection de boutiques en ligne avec de la musique haute résolution
Ce qui était sur le premier iPod: vingt albums choisis par Steve Jobs en 2001
Nous avons pris notre retraite - nous discutons de gadgets audio autrefois populaires qui sont déjà "obsolètes"

Source: https://habr.com/ru/post/fr456386/


All Articles