Téléchargement de spectro - Téléchargement du code source spectro

spectro

Données du site Web

1.0.0

Télécharger

? Spectro

Spectro est un générateur de spectrogramme audio en temps réel pour le Web. Il peut visualiser le son de votre microphone ou de vos fichiers audio sur votre appareil.

Capture d'écran de Spectro

Usage

Dirigez-vous ici pour commencer à utiliser Spectro.

Pour commencer à générer un spectrogramme, vous pouvez soit:

Cliquez sur ? Enregistrez à partir du bouton micro pour commencer à générer un spectrogramme à partir de votre microphone.
Si vous souhaitez enregistrer l'audio à partir de la sortie audio de votre appareil, vous pouvez activer le «mix stéréo» sur Windows ou utiliser Blackhole sur macOS, puis définir cet appareil en tant que périphérique d'entrée par défaut de votre navigateur.
Cliquez sur ? Lire le bouton de fichier audio pour démarrer la génération d'un spectrogramme à partir d'un fichier audio sur votre appareil. Cela lit également le fichier audio sélectionné.
Tout format audio pris en charge par votre navigateur peut être joué.

Le spectrogramme génère de droite à gauche , avec l'audio le plus récent apparaissant à droite et le plus ancien à gauche.

Il existe également des options disponibles pour contrôler l'apparence du spectrogramme:

? La sensibilité contrôle à quel point le spectrogramme est sensible à l'audio. Le changement a le même effet que la modification du volume de l'audio.
? Le contraste applique une mise à l'échelle logarithmique au spectrogramme pour ajouter un contraste à l'image. Le modifier peut aider à produire une meilleure image en fonction de l'analyse de l'audio.
? Zoom contrôle comment le zoom dans le spectrogramme apparaît le long de l'axe temporel.
? Min. et max. Contrôle de fréquence La plage de fréquences à afficher sur le spectrogramme. Les fréquences plus basses apparaissent au bas du spectrogramme et des fréquences plus élevées en haut.
? L'échelle de fréquence contrôle la mise à l'échelle pour s'appliquer à l'axe de fréquence du spectrogramme. «Linéaire» signifie que toutes les fréquences sont représentées uniformément, tandis que «Mel» donne une apparence plus naturelle en donnant plus de poids aux fréquences plus basses.
? Les couleurs contrôlent le schéma de couleurs pour afficher le spectrogramme.

Vous pouvez cliquer sur le bouton ⏹ Stop pour arrêter de générer le spectrogramme. Si vous lisez un fichier audio, le spectrogramme s'arrête automatiquement à la fin de la piste.

❓ FAQ

Qu'est-ce qu'un spectrogramme?

Un spectrogramme est une image produite à partir du son. Il visualise les fréquences présentes dans le son au fil du temps, avec le temps représenté le long de l'axe horizontal, la fréquence le long de l'axe vertical et l'intensité de la fréquence par couleur.

Par exemple, si vous deviez générer un spectrogramme de vous siffler, vous verriez une ligne lumineuse à la hauteur du sifflet.

Avec quels navigateurs Spectro fonctionne-t-il?

Les dernières versions de Chrome, Firefox et Safari fonctionnent toutes avec Spectro. Tout autre navigateur à base de chrome comme la nouvelle version de Microsoft Edge devrait également fonctionner.

Comment fonctionne Spectro?

Voici un article de blog décrivant tout cela! Un aperçu rapide:

L'entrée audio est divisée en cadres de 4096 échantillons, qui se chevauchent tous les 1024 échantillons. J'ai choisi 4096 comme taille de fenêtre car il semblait être le meilleur compromis entre le temps et la résolution de fréquence - je pourrais finalement le rendre configurable.
Ces cadres qui se chevauchent sont ensuite fenêtrés à l'aide d'une fonction Blackman-Harris à sept termes, que j'ai décidé car il semblait donner la clarté la plus visuelle.
Les fenêtres sont ensuite exécutées à travers une transformée de Fourier rapide (en utilisant JSFFT) dans un travailleur Web dédié, et la norme de chaque bac de fréquence est prise comme la base du spectrogramme.
Ces données de spectrogramme brutes sont ensuite insérées dans une file d'attente circulaire, qui a une capacité égale à la largeur de l'image du spectrogramme.
Les données de spectrogramme brutes sont ensuite rendues à l'écran avec WebGL, en utilisant un shader pour effectuer rapidement toute la mise à l'échelle, la colorisation et d'autres ajustements d'image directement sur le GPU. Seules de nouvelles données de spectrogramme brutes sont téléchargées vers le GPU chaque trame pour améliorer les performances au lieu de faire un téléchargement complet.
Le panneau Paramètres utilise React et Material-UI (qui explique la majeure partie de la taille du bundle?).