Building a Real Audio Hover Preview with Zero Dependencies

Описание и применение

Создано решение для мгновенного воспроизведения аудио‑превью при наведении на карточки артистов без использования фреймворков и сторонних библиотек. Используются iTunes Search API и Web Audio API для получения и анализа аудио, а также Media Session API для интеграции с ОС. Решение учитывает устройства без наведения, настройки доступности и предотвращает гонки при быстрых перемещениях курсора.

Задача

Provide instant audio previews on artist cards without page loads, frameworks, or extra dependencies.

Результат

A zero‑dependency, vanilla‑JS hover preview that plays music instantly, displays a real equalizer, handles race conditions, and respects accessibility settings.

Рабочий процесс

• Fetch preview URLs from iTunes Search API and cache them on the card’s data attributes.
• Create an Audio element, AudioContext, and AnalyserNode to read real frequency data.
• Draw 8 equalizer bars from the analyser’s frequency bins using requestAnimationFrame.
• Implement a race‑condition guard with a generation counter to cancel stale callbacks.
• Apply CSS media queries for touch devices and prefers‑reduced‑motion to disable hover previews when appropriate.
• Add optional extras: document title swap, Media Session API, and cross‑origin handling for Apple’s CDN.

Доказательства

Apple's iTunes Search API is a public endpoint that doesn't need authentication.

Источник

The preview URL gets cached on the card's data- attribute. First hover does the lookup. Every hover after that is instant.

Источник

The 8-bar equalizer isn't animated CSS pretending to be sound. It reads actual frequency data from the audio.

Источник

New hover bumps the counter. Every previous hover's callbacks check before touching the DOM. The orphaned callbacks just die silently.

Источник

Touch devices (hover: none, pointer: coarse): hover never fires. A tap on the photo toggles play/stop.

Источник