Я создал способ сделать вашу музыку так же хорошо, как и звучит
programming javascript javascript-music-library react-music-library music-visualizers build-music-visualizers build-your-own-music-visual build-music-visuals how-to-build-music-visuals

Я создал способ сделать вашу музыку так же хорошо, как и звучит

7 августа 2025 г.

Кто -нибудь еще помнит старые добрые времена игрока Windows Media? Будучи ребенком 2000 -х годов, Windows Media Player стал одним из основных продуктов того, как я потреблял музыку. Мои друзья давали мне флэш-накопители MP3-файлов, которые они, скорее всего, сорвали из Limewire, и я загрузил те же 50-100 песен, чтобы воспроизвести на повторение.

Будучи скучным ребенком, я думал, что визуализации в WMP были самыми крутыми вещами. Все работали на заднем плане, пока мы запускали музыку. Но в настоящее время кажется, что визуализации практически вымерли. Что случилось?

Трудно точно определить, почему именно. Может быть, музыка стала более сложной. Может быть, мы настолько привыкли к гипертимулирующим визуальным эффектам, что простая форма волны больше не впечатляет. Может быть, iPod и телефоны убили его, делая музыкальную портативную и без экрана. Или, может быть ... мир только что пошел.

Тем не менее, я нахожусь в споре. Я все еще чувствую ностальгию по старым визуализаторам. Мне нравится, что визуализатор прикрепляется к моей музыке. И я все еще думаю, что аудио визуализация имеет ценность вне просто «крутой».

К сожалению, я чувствую, что нынешнее состояние JS и React отражает увядающая популярность визуализаторов. Два основных визуализатора, доступных на NPM, ... тусклые (на мой взгляд). Они визуализируют звук в определенных степени, но может быть больше вариантов. Если мы действительно хотим вернуть визуализаторы, нам нужно решение, которое является одновременно надежным и гибким. Вот куда мы с командой приходим.

Зрение

Мы построили Waviz, библиотеку визуализации на основе JavaScript/React, направленную на возрождение визуализаторов музыки. С самого начала мы знали, что это не может быть просто сильным; Он должен был быть адаптируемым, способным обслуживать как ликеров, так и случайных пользователей.

Некоторые пользователи хотят полного творческого контроля. Они хотят зацепить API веб-аудио, манипулировать необработанными данными частоты и настраивать каждый кадр их визуализатора. Для них мы построили модульный двигатель Core - один с открытыми анализаторами и утилитами для полной свободы для формирования своего опыта.

Другие пользователи просто хотят, чтобы ностальгические острые ощущения от просмотра музыки ожили. Они хотят подключить компонент, нажимать на игру и просто атмосферу. Для них мы создали растущую библиотеку компонентов React - заполненную вневременными формами волны, радиальными стержнями, всплесками частиц и многим другим! Все эти компоненты стилизованы и отзывчивы, прямо из коробки.

Архитектура

Для обслуживания обеих сторон наша библиотека (называемая Waviz на NPM) может быть разделена на два компонента:

  • Waviz Core Library
  • Waviz React Component Library - ласково назван «Plug N Play».

Waviz Core

Наша основная библиотека Waviz в основном разработана с учетом модульности. У нас есть три примитивных класса в нашей основной библиотеке, которые вы можете экспортировать:

  • Вход
  • Анализатор
  • Визуализатор

Эти три класса могут использоваться независимо, если это так. Тем не менее, у нас есть композиционный класс под названием Waviz, который пакетов все три, так что вы можете получить прямо к визуализации в JavaScript/HTML!

Мы также считаем, что сильная библиотека должна свести к минимуму зависимости. С этой целью наша основная библиотека построена только с Canvas и Webaudioapi!

В настоящее время мы поддерживаем ряд входов, от HTML <Audio> и <dive> элементов до входов MediaStream (например, микрофоны и экрана звука). Чтобы получить полный список, ознакомьтесь с нашими документами: https://wavizjs.com

Подключить n играть

Наша библиотека «Plug N Play», с другой стороны, была разработана с учетом удобства. Фрагмент кода является примером типичного кода, который вам нужен для инициализации нашего компонента визуализатора. Есть только одна обязательная опора, которую нужно пройти - аудиоэлемент. Однако я бы настоятельно рекомендую вам также пройти в категорию, чтобы иметь возможность более свободно контролировать пространство, в котором занимает визуализатор.

В настоящее время у нас есть 25 различных пресетов визуализатора, которые вы можете использовать - с планами добавить больше в будущем. Каждый визуализатор имеет различный набор вариантов, которые вы можете настроить, но с меньшей свободой по сравнению с созданием визуализатора, прямого из нашей основной библиотеки.

Исследуйте все наши пресеты в нашей галерее здесь: https://wavizjs.com

Последние мысли

Это было больше, чем просто кодовая база для моей команды и меня: это страстный проект, питаемый ностальгией, любопытством и убеждением, что звук заслуживает того, чтобы его видели столько, сколько слышал. Мы намеревались вернуть эту магию, не только для себя, но и для тех, кто все еще верит в силу визуального звука.

И мы только начинаем.

Waviz был построен для пульса и реагировать в режиме реального времени - но его потенциал выходит за рамки музыки. Поскольку Waviz оснащен гибким аудио -анализом и легким визуализацией холста, Waviz может адаптироваться ко всем видам творческого использования. Представьте, что добавляете ритмические визуальные эффекты в приложение для посредничества. Или использование Waviz в классе, чтобы помочь студентам увидеть Sound.Evel Game Devs и Streaters могут использовать Waviz для динамического наложения. Если есть звук, Waviz может оживить его.

Этот двигатель рендеринга построен для расширения, взлома и переосмысленности. Являетесь ли вы разработчиком, дизайнером или творческим мыслителем, мы приветствуем ваши отзывы, идеи и вклад. Waviz - это не просто инструмент - это растущая игровая площадка. И лучшие вещи случаются, когда творческие умы строятся вместе.

Вместе мы можем вернуть визуализаторы.


Проверьте нашу страницу продукта GitHub здесь: https://github.com/waviz-team/waviz

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE