Repolode
Предложить
jberg

jberg/butterchurn

Реализация классического музыкального визуализатора Milkdrop на WebGL, которая отображает пресеты Milkdrop в браузере с помощью Web Audio API.

Open source альтернатива:Winamp

Открыть на GitHubСайт
Звёзды
1,972
Форки
171
Открытые issues
24
Последний коммит
6 месяцев назад

Что это?

Butterchurn — это JavaScript-библиотека, которая переносит музыкальный визуализатор Milkdrop на WebGL, позволяя запускать визуализации в стиле Milkdrop в любом современном браузере. Она получает аудио через Web Audio API и выводит анимированные кадры на HTML canvas.

Чтобы создать визуализатор, разработчики указывают canvas и аудиоконтекст, подключают аудиоузел от источника звука или микрофона и загружают пресет. Пресеты можно плавно сменять за заданное число секунд, а размер рендерера — менять во время работы. Дополнительный пакет butterchurn-presets содержит коллекцию готовых пресетов.

Для работы библиотеке требуется WebGL 2, поэтому в неё входит небольшой вспомогательный инструмент для проверки его поддержки в текущем браузере. Библиотеку интегрировали в несколько музыкальных проигрывателей и приложений, в том числе Webamp.

Ключевые возможности

  • 01Отображает пресеты Milkdrop в браузере с помощью WebGL.
  • 02Получает аудио через Web Audio API.
  • 03Плавно переключает пресеты за заданное время.
  • 04Позволяет менять размер рендерера во время работы.
  • 05Поставляется с отдельным пакетом, содержащим коллекцию пресетов.
  • 06Содержит вспомогательный инструмент для проверки поддержки WebGL 2.

Сценарии использования

  • Добавление музыкального визуализатора в веб-проигрыватель.
  • Визуализация аудио с веб-страницы или из расширения браузера.
  • Создание в браузере экрана для живой музыки или караоке.
  • Эксперименты с пресетами Milkdrop в веб-приложении.

Быстрый старт

  1. 1

    Установите пакеты с помощью npm

    npm install butterchurn butterchurn-presets
  2. 2

    Создайте визуализатор на canvas, подключённом к аудиоконтексту

  3. 3

    Загрузите пресет и выполните рендеринг кадров

Что важно знать

  • Требуется браузер с поддержкой WebGL 2.

Темы

#music-visualizer#webgl#webaudio-api#visualization#javascript#milkdrop#assemblyscript#reimplementation#wasm#webgl2

Частые вопросы

Что такое butterchurn?
Реализация классического музыкального визуализатора Milkdrop на WebGL, которая отображает пресеты Milkdrop в браузере с помощью Web Audio API. Butterchurn — это JavaScript-библиотека, которая переносит музыкальный визуализатор Milkdrop на WebGL, позволяя запускать визуализации в стиле Milkdrop в любом современном браузере. Она получает аудио через Web Audio API и выводит анимированные кадры на HTML canvas.
butterchurn можно использовать бесплатно? Какая у него лицензия?
butterchurn распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
butterchurn всё ещё поддерживается?
Нет коммитов больше 6 месяцев. Последний коммит в butterchurn — 20 апр. 2026 г..
Для чего можно использовать butterchurn?
Добавление музыкального визуализатора в веб-проигрыватель. Визуализация аудио с веб-страницы или из расширения браузера. Создание в браузере экрана для живой музыки или караоке. Эксперименты с пресетами Milkdrop в веб-приложении.
Как установить butterchurn?
Установите пакеты с помощью npm: npm install butterchurn butterchurn-presets Создайте визуализатор на canvas, подключённом к аудиоконтексту Загрузите пресет и выполните рендеринг кадров
Где скачать butterchurn?
Исходный код и инструкции по установке — на GitHub: https://github.com/jberg/butterchurn

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты