Körsatiş · compound
Audio pleyer
Ixçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×). Çiziqlar balandligi `data-peaks` dan yoki sarlavhadan hosil böladi. Bir vaqtda faqat bitta pleyer yangraydi. Ovozli xabar, podkast qismi, qönğiroq yozuvi uçun.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | sm | md |
Anatomiya
- root
.fx-audioplayerşart - play
.fx-audioplayer__playixtiyoriy - meta
.fx-audioplayer__metaixtiyoriy - title
.fx-audioplayer__titleşart - sub
.fx-audioplayer__subixtiyoriy - wave
.fx-audioplayer__waveixtiyoriy - bar
.fx-audioplayer__barixtiyoriy - time
.fx-audioplayer__timeixtiyoriy - speed
.fx-audioplayer__speedixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Space | Tölqinda: ijro / pauza |
| ← → | 5 soniya orqaga / oldinga |
| Home, End | Boşiga / oxiriga |
Tugma aria-label “Ijro etiş: <sarlavha>” (holatga qarab “Pauza”). Tölqin — role="slider" (tabindex=0, aria-valuenow/max soniyada, aria-valuetext “0:12 / 1:05”), ← → ±5 s, Home/End, Space ijro. Tezlik tugmasida joriy qiymat matn bilan. Ötilgan çiziqlar rangdan taşqari balandroq emas — vaqt matni ham bor.
Naqş: WAI-ARIA APG slider · rol slider
Kod
AI uçun: qaçon işlatiladi
- Qisqa audio: ovozli xabar, qönğiroq yozuvi, podkast parçasi.
- Video →
videoplayer - Tölqinni haqiqiy ovoz tahlili deb körsatmang — u faqat progress şakli; aniq tahlil kerak bölsa `data-peaks`ni serverda hisoblab bering.
- Sahifa oçilganda avtomatik yangratmang.
- Uzun podkast uçun bobli (chapters) alohida mexanizm kerak — bu pleyer qisqa yozuvlar uçun.
npx foxui add audioplayer
<div class="fx-audioplayer" data-fx-audioplayer data-peaks="30,55,80,45,60,90,70,35,50,75,95,60,40,55,85,65,30,45,70,50,35,60,80,55"> <audio preload="metadata" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio> <div class="fx-audioplayer__meta"><span class="fx-audioplayer__title">Mijoz bilan qönğiroq</span><span class="fx-audioplayer__sub">Guli · 12 oktyabr</span></div> </div>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-solid-hover --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-circle --fx-radius-control --fx-radius-nav --fx-radius-surface --fx-size-control-lg --fx-size-control-md --fx-size-control-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary