Бесплатные звуки для ваших vibe-coded проектов! — soundcn & ZzFX

Когда я делаю какой-нибудь проект, особенно если это просто базовый лендинг, одна из первых вещей, которую замечает моя аудитория, — насколько интерактивен интерфейс. Издала ли кнопка звук при клике? Звучит ли уведомление? Есть ли небольшой звук загрузки? Звук — ключевой компонент того, чтобы проект ощущался как настоящее приложение, а не просто статичная веб-страница.

Но раздобыть звук бывает непросто. Либо приходится подписываться на какой-нибудь сервис стоковых звуков, либо копаться в случайных репозиториях с creative commons сомнительного качества, либо сказать своему агенту «добавь какой-нибудь звук» и надеяться, что он не вернётся с галлюцинацией какой-то кривой реализации web audio api, которая на проде просто не заработает. Оба этих репозитория решают эту проблему по-разному, и вместе они способны справиться практически с любым сценарием, который может подкинуть ваше vibe-приложение!

soundcn — это коллекция из 700+ готовых звуковых эффектов: клики кнопок, уведомления, переходы и так далее. Все эти звуки реализованы как самодостаточные typescript-модули, не требующие никаких внешних зависимостей и не вызывающие проблем с CORS. Каждый звук встроен в виде base64-закодированного data uri прямо в код и сопровождается хуком useSound для воспроизведения через web audio api. Устанавливать такой звук — всё равно что устанавливать модули shadcn: запускаете одну команду, и файл сразу попадает в ваш кодбейс. Прежде чем выбирать звук, загляните в полный список на soundcn.xyz — там можно прослушать каждый звук прямо на сайте. Большинство этих звуков взято из kenney, который распространяется по лицензии CC0 и потому свободен для коммерческого использования.

ZzFX — это мини веб-аудио синтезатор (меньше 1 КБ в сжатом виде!), который позволяет создавать собственные звуки на чистом javascript. С помощью 20 параметров и одного вызова функции можно создать что угодно — от подбора монетки до взрыва! Самое приятное в zzfx — это онлайновый zzfx sound designer. Просто кликайте по нему, пока не найдёте звук, который вам нравится, и он выдаст вам фрагмент кода, который можно скопировать и вставить в свой проект. Никаких файлов, никаких ассетов, вообще ничего! Изначально ZzFX создавался для game jam'ов, где ресурсы ограничены, но он отлично подходит и для обычных веб-приложений.

1Как добавить звуки в проект

Чтобы использовать soundcn, вам понадобится react-приложение с установленным shadcn. Зайдите на soundcn.xyz и просмотрите каталог. Как только найдёте понравившийся звук, установите его. Файл добавится в ваш кодбейс, так что при воспроизведении звука не будет ни требований к рантайму, ни сетевых запросов.

npx shadcn add @soundcn/click-soft

Чтобы использовать zzfx, установите его через npm либо подключите его микро-версию прямо в html. Дальше зайдите в sound designer и создайте свой звук. Скопируйте получившийся массив.

npm install zzfx