I Built a Spatial Audio Radar ft. Vibe Code Arena

I Built a Spatial Audio Radar ft. Vibe Code Arena
https://ift.tt/YC9Njcw

Виглядає спочатку як візуальна проблема.

Коло в центрі.
Клікнете куди-небудь → з’являється світяще кільце.
Звучить звук.

Гарна маленька науково-фантастична UI.

Та момент, коли ви намагаєтесь зробити звук таким, ніби він справді походить з того місця, куди ви клікнули…

Все змінюється.

Бо тепер ви не будуєте візуалізатор.

Ви будуєте координатну систему, яку можуть чути люди

Ілюзія ламається миттєво

Можна швидко зробити щось, що працює:

audio.play();

Click → sound.

Готово.

Але не має значення, куди ви натиснете.

Лівий бік. Правий бік. Край. Центр.

Все звучить однаково.

І це проблема.

Бо візуально ви кажете користувачу:

«Звук походить із <точного цього моменту>»

Але аудіально ви кажете:

«Насправді він ні з якого конкретного місця не походить»

Це невідповідність миттєво вбиває ілюзію.

This isn’t about sound playback
Це про просторове відображення

Вам потрібно не просто відтворити звук.
Вам потрібно відповісти:

«Де розташований цей звук відносно слухача?»

У 2D це зводиться до чогось простого:

Left ↔ Right

Якідь ідеально відповідають стереопануванню.

The mistake most implementations make
Вони розглядають позицію кліку як абсолютну.

const pan = mouseX / width;

Це дає значення від 0 до 1.

А аудіопанування очікує:

-1 → повністю ліворуч
0 → центр
1 → повністю праворуч

Отже, ваше відображення вже неправильне.

Навіть якщо математика «працює».

The correct mental model
Усе відносно до центру радару, а не до екрану.

Тож ви обчислюєте:

const centerX = rect.left + rect.width / 2;
const dx = (mouseX – centerX) / (rect.width / 2);

Тепер dx варіюється від:

-1 → далеко ліворуч
0 → центр
1 → далеко праворуч

Ця одна лінія виправляє всю просторову ілюзію.

The sound engine becomes directional
Тепер замість:

audio.play();

ви направляєте його через панер:

const panner = ctx.createStereoPanner();
panner.pan.value = dx;

І раптом…
Клік зліва звук ліворуч.
Клік справа звук праворуч.
Система відчувається «заземленою».

The visual pulse is not decoration
Це підтвердження

Коли ви натискаєте, ви створюєте кільце:

ring.style.transform = “scale(1.5)”
ring.style.opacity = 0;

Воно розширюється. Зникає.

Але важливе не анімація.

Важливе те, що воно походить з точно того місця кліку.

Бо тепер:

– ваші очі бачать джерело
– ваші вуха чують напрямок

І вони згодні.

Ця згода створює відчуття реальності системи.

The center ripple reveals something subtle
Кожен клік також запускає центр-пульс.

Спочатку це здається надмірним.

Навіщо анімувати центр, якщо клік інший?

Бо він фіксує систему.

Він нагадує користувачу:

«Ти тут. Все відносно цієї точки.»

Без цього радар здавався би полотном.

З ним він відчувається як система.

The drone toggle is not just a feature
Це базова лінія

Коли все мовчить, кожен клік здається ізольованим.

Відокремлений.

Додайте безперервний фоновий цикл:

drone.loop = true;
drone.play();

Тепер клики існують <в рамках> звукового ландшафту.

І просторові різниці стають помітнішими.

Бо є контраст.

Timing becomes perception
Якщо звук відтворюється навіть трохи з запізненням…

Ілюзія ламається.

Візуальне – миттєве.

Аудіо повинно відповідати.

Тому ви уникати затримок і тримаєте все в одному кадровому обліку подій.

The radar is secretly a coordinate system
Той круг у центрі?

Він не тільки візуальний.

Він визначає:

– межі
– центр
– область взаємодії

Усе залежить від його розмірів:

const rect = radar.getBoundingClientRect();

Якщо це відхилено…

Ваше просторове відображення пливе.

І користувач це відчуває.

Хоча пояснити чому не може.

Where most implementations go wrong
Не в звуці.

Не у візуалах.

У

Вони:
– обчислюють пан від ширини екрану замість радару
– неправильно розміщують центр
– затримують відтворення аудіо
– синхронізують візуали з звуком

Індивідуально це дрібниці.
Разом вони руйнують занурення.

What shows up in Vibe Code Arena
Цей виклик створює дуже конкретний розподіл.

Одна модель будує:
– гарні візуали
– робочий звук
– базову взаємодію

Але звук здається відокремленим від положення.

Інша модель узгоджує все:
– правильне відносне до центру відображення
– негайний аудіо зворотний зв’язок
– синхронізовані візуали

Тепер система звучить просторово

The human version usually does one thing right
Людський підхід зазвичай робить одну річ правильно

Вона сприймає центр як священний.
Усе обчислюється відносно нього.
Бо як тільки це правильно…

Все інше лягає на місце.

The part you don’t expect
Після побудови цього ви перестаєте бачити:

«клік → відтворити звук»

І починаєте бачити:

«вхід → просторове відображення → аудіоперцепція → візуальне підтвердження»

Цей конвеєр — справжня система.

The shift
Ви перестаєте думати:

«як мені відтворити звук?»

І починаєте думати:

«як розмістити звук у просторі?»

Це зовсім інша проблема.

If you want to explore this properly
Якщо хочете дослідити це належним чином

Не просто клікати навколо.

Перевертайте тест так свідомо:

– клікайте по крайній лівій/правій частині
– клік near center
– змінюйте розмір вікна

Слідкуйте за тим, як веде себе ваша мапінг.

Там з’являються неточності.

Бо ця система не падає голосно.

Вона провалюється у тому, наскільки переконливою вона здається.

І це набагато складніше відлагодити.

👉Спробуйте тут: https://ift.tt/PIt2EWL

HI-FI News

via DEV Community https://dev.to

April 27, 2026 at 11:42AM

April 27, 2026 at 11:42AM