как я добавил в проект аудиоплеер с плейлистом, контролами и базовым управлением звуком. это не отдельный виджет, а часть страницы с текстом, поэтому он связан с контентом (заголовки, шаринг и т.д.).

данные и состояние

на вход приходит массив медиа (media), который я сначала нормализую:

• добавляю id

• добавляю флаги isCurrent и isPlaying
  

const prepareMedia = (media) =>
  media.map((item, index) => ({
    ...item,
    id: index,
    isCurrent: false,
    isPlaying: false
  }))

дальше всё состояние плеера живёт в этом массиве tracks.

текущий трек определяется через isCurrent. если его нет — автоматически выбирается первый.

тут есть небольшой сайд-эффект — если текущего трека нет, он выставляется прямо внутри геттера. не идеально, но в этом месте это упростило код.

переключение треков и play/pause

при клике на трек или кнопку play я полностью пересобираю массив:

setTracks(
  tracks().map((track) => ({
    ...track,
    isCurrent: track.id === m.id,
    isPlaying: track.id === m.id ? !track.isPlaying : false
  }))
)

• только один трек может быть текущим

• только один может играть

не стал выносить это в отдельный store — здесь проще пересобрать массив, чем поддерживать несколько источников состояния.

при переключении next/prev:

• считается индекс текущего трека

• выбирается следующий или предыдущий (с зацикливанием)

синхронизация с <audio>

есть отдельный audioRef, который реально воспроизводит звук.

через createEffect я слежу за текущим треком:

if (audioRef.src !== getCurrentTrack().url) {
  audioRef.src = getCurrentTrack().url
  audioRef.load()
}

если трек поменялся — обновляется src.

воспроизведение

при play:

• если контекст звука “спит” — резюмлю его

• вызываю audioRef.play() или pause()
  

if (getCurrentTrack().isPlaying) {
  await audioRef.play()
} else {
  audioRef.pause()
}

прогресс и время

прогресс обновляется вручную:

progressFilledRef.style.width = `${(audioRef.currentTime / duration) * 100 || 0}%`

• беру currentTime из <audio>

• делю на duration

• пишу в width

прогресс обновляется напрямую через style — это проще, чем городить отдельную реактивную прослойку.

время форматируется через Date:

new Date(point * 1000).toISOString().slice(14, -5)

перемотка (scrub)

при клике по прогресс-бару:

audioRef.currentTime = (event.offsetX / progressRef.offsetWidth) * duration

при зажатой кнопке мыши — обновляется на mousemove.

используется offsetX, что не всегда идеально, но для этого кейса оказалось достаточно.

обработка событий audio

• onTimeUpdate → обновляю прогресс и текущее время

• onLoadedMetadata → получаю длительность

• onEnded → сбрасываю прогресс и время

громкость через web audio api

я не использовал просто audio.volume, а сделал через AudioContext:

const track = audioContext().createMediaElementSource(audioRef)
track.connect(gainNode()).connect(audioContext().destination)

и дальше:

gainNode.gain.value = Number(volumeRef.value)

громкость управляется через input[type=range].

громкость сделал через web audio api — немного оверкилл, но зато полный контроль.

с range-инпутом пришлось немного повозиться из-за разных браузеров.

header (контролы)

в PlayerHeader:

• play / pause

• next / prev

• кнопка громкости

громкость открывается как popover:

const [isVolumeBarOpened, setIsVolumeBarOpened] = createSignal(false)

и закрывается через кастомный хук useOutsideClickHandler.

плейлист

в PlayerPlaylist:

• список треков (<For each={tracks}>)

• кнопка play у каждого трека

• отображение текущего состояния (play/pause иконка)
  

getCurrentTrack().id === m.id && getCurrentTrack().isPlaying

список не просто отображает данные — он тоже участвует в управлении плеером.

шаринг

у каждого трека есть кнопка шаринга:

<SharePopup
  title={m.title}
  description={getDescription(body)}
  imageUrl={m.pic}
  shareUrl={...}
/>

• используется заголовок трека

• описание берётся из текста статьи

• ссылка формируется от articleSlug

стили

в css:

• flex layout для header и контролов

• адаптив через breakpoint

• кастомный progress bar (через border и ::after)

• кастомный range input для громкости (webkit / moz / ms)

прогресс-бар и ползунок громкости полностью переопределены, дефолтные стили не используются.

в итоге это не отдельный плеер, а часть страницы — с текстом, шарингом и списком треков, которые живут вместе.

source code