재생 컨트롤
재생·일시정지, 10초 이동, 음량 조절 버튼과 재생 시간을 한 줄에 배치한다. 각 버튼에는 접근 가능한 이름을 제공한다.
상태
Midnight Session
0:00 / 4:12
Midnight Session
1:24 / 4:12
활용 방법
오디오 재생
playing 값에 따라 aria-pressed와 재생·일시정지 레이블이 바뀐다.
Preview
Midnight Session
1:24 / 4:12
tsx
<PlaybackControls playing={playing} title="Midnight Session" elapsed="1:24" duration="4:12" onPlayChange={setPlaying} />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| playing | boolean | false | |
| title / elapsed / duration | ReactNode | - | |
| onPlayChange | (playing: boolean) => void | - | |
| onSeekBackward / onSeekForward / onVolume | () => void | - |