React audio player with compound-slot layout (waveform, playlist, ARIA) — recent update added playback speed in 3 surfaces

React-плеєр audio з композитивним розташуванням слотів ( waveform, плейлист, ARIA) — нещодавнє оновлення додало швидкість відтворення на 3 поверхах

https://ift.tt/0Qb8kKL

react-modern-audio-player — бібліотека аудіо для React, яку я підтримую. Ймовірно, варто подивитися, якщо ви створюєте щось більше за одну кнопку відтворення: кожен вбудований елемент управління виведено як композитний слот, тож можна змішувати готовий макет із власним розташуванням замість заміни всього компонента.

Слоти, які можна вставити (підмножина):

• <AudioPlayer.Progress /> — смуга або waveform на базі wavesurfer
• <AudioPlayer.Volume /> — тригер + повзунок, режим наведення або натискання, розміщення з чотирьох боків
• <AudioPlayer.PlayList /> — сортування, перетягування
• <AudioPlayer.SpeedSelector /> — меню із дискретною швидкістю
• <AudioPlayer.CustomComponent /> — користувацький слот

Перемістіть будь-який із них у інше місце в сітці макету:

Те саме стан доступний за допомогою імперативного хука, тож UI не обов’язково має жити всередині кадру плеєра:

const { playbackRate, setPlaybackRate, currentTime, isPlaying } = useAudioPlayer();

A11y слідує WAI-ARIA APG з коробки — меню швидкості використовує role="menu" + role="menuitemradio" з aria-checked, а режим клік-контролю Volume використовує role="dialog" (не tooltip — семантика підказки не підходить для інтерактивної панелі). Така ж модель використовується video.js і Vidstack.

Опціональний режим waveform через wavesurfer.js:

Що з’явилось у версії 2.3.1

• Відтворення зі швидкістю, доступне трьома ортогональними способами: слот <AudioPlayer.SpeedSelector />, useAudioPlayer().setPlaybackRate(rate), та поле audioInitialState.playbackRate для сценаріїв “завжди запускати на 1.5×”.
• Налаштування випадаючого списку для <Volume /> та <SpeedSelector /> — triggerType: "click" | "hover", чотиристороннє placement. Висновок: композитний проп > UIContext > значення за замовчуванням компонента.
• Виправлення тиші під час заміни треку на плеєрах із прогрес-баром (pathNext/pathEnd та PREV обидва тепер збільшують audioResetKey).
• Три малі зbreaking-зміни, до яких варто звернути увагу перед «закріпленням»: перейменування константи (defaultInterfacePlacementMaxLength → DEFAULT_INTERFACE_GRID_BOUND), тепер у грід-ячейці row1-10 зарезервована для дефолтного контролю швидкості, та зміна рольового атрибута для режиму кліку Volume.

Стек: TypeScript-фокусований, сумісність з Next.js App Router (Server Components), wavesurfer.js для опційного режиму waveform, без залежності від UI-фреймворку.

Репозиторій, README, повний журнал змін:
https://github.com/slash9494/react-modern-audio-player

Зворотний зв’язок щодо ергономіки SpeedSelector буде корисний — форма зворотного виклику formatRate пройшла кілька редакцій, і я не впевнений, що вона потрапила в потрібне місце.

HI-FI News

через DEV Community: typescript https://ift.tt/UjOG0qI

1 травня 2026 р. о 13:36 PM до української. Виписати тільки переведений текст.

May 1, 2026 at 01:36PM