컴포넌트 공방: Reflex 라이브러리 100
·
강의 개요
레이아웃
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
타이포그래피
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
폼
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
데이터 표시
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
펼침과 전환
·
Tabs
·
Accordion
·
Segmented Control
오버레이
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
동적 렌더링
·
Cond
·
Match
·
Foreach
·
Auto Scroll
미디어
·
Image
·
Audio
·
Video
표와 데이터 그리드
·
Table
·
Data Table
·
Data Editor
차트
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
차트 부품
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
다른 차트 라이브러리
·
Plotly
·
Pyplot
HTML 요소
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
그 밖의 도구
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.audio공식 문서
공방 주문서
가게 관리 화면의 설정에, 새 주문 알림음을 미리 들어 보고 음량을 조절하는 칸을 만들어 주세요.
rx.audio는 소리 파일을 재생하는 플레이어입니다. src에 소리 주소를 넣습니다. 외부 주소도 되고, assets 폴더의 test.mp3라면 src="/test.mp3"입니다. 내부는 react-player이고 rx.video와 같은 부품이므로 속성과 이벤트가 똑같습니다.
rx.audio(
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
width="100%",
height="54px",
)재생과 일시정지도 속성입니다. playing을 켜면 재생되고 끄면 멈춥니다. controls를 끄면 브라우저의 재생 막대가 사라지므로, 그때는 State와 버튼으로 직접 조작합니다.
속성 바꿔 보기
playing
loop
controls
muted
volume
0.8
rx.audio(src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", playing=False, loop=False, controls=True, muted=False, volume=0.8, width="100%", height="54px")| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
src | 주소, 주소 목록, {"src": …, "type": …} 목록 | 없음 | 재생할 소리 |
playing | True / False | False | 재생 / 일시정지 |
controls | True / False | True | 브라우저 재생 막대 보이기 |
loop | True / False | False | 끝나면 처음부터 다시 |
volume | 0 ~ 1 | 1 | 음량 |
muted | True / False | False | 소리 끄기 |
config | dict | 없음 | 플레이어 종류별 설정({"youtube": {…}} 등) |
disable_remote_playback | True / False | False | 다른 기기로 보내 재생하기(캐스트) 끄기 |
light | True / False | False | 플레이어 대신 미리보기만 보이고, 누르면 플레이어를 염(Video 페이지) |
width · height | CSS 크기 | 내용 크기 | 플레이어 크기 |
| 이벤트 | 넘기는 값 | 언제 |
|---|---|---|
on_ready | 없음 | 불러오기를 마치고 재생할 준비가 됨 |
on_start | 없음 | 처음 재생을 시작함 |
on_play · on_pause | 없음 | 재생됨 · 일시정지됨 |
on_playing · on_waiting | 없음 | 실제로 소리가 나기 시작함 · 버퍼링으로 기다림 |
on_duration_change | 길이(초, float) | 전체 길이를 알게 됨 |
on_time_update | 현재 위치(초, float) | 재생 위치가 바뀜(초당 약 4번) |
on_progress | {played, playedSeconds, loaded, loadedSeconds, duration} | 데이터를 내려받는 동안 |
on_seeking · on_seeked | 없음 · 위치(초) | 위치를 옮기는 중 · 옮김 |
on_rate_change | 재생 속도(float) | 재생 속도가 바뀜 |
on_ended | 없음 | 끝까지 재생함(loop면 일어나지 않음) |
on_error | 없음 | 재생 중 오류 |
on_click_preview | 없음 | light 미리보기를 누름 |
on_enter_picture_in_picture · on_leave_picture_in_picture | 없음 | 화면 속 화면 들어감 · 나옴 |
Reflex는 controls의 기본값을 True로 둡니다(react-player 자체의 기본값은 False). 예전 이름인 url, on_duration, on_seek 같은 속성은 0.10에서 src, on_duration_change, on_seeked로 바뀌었고, 옛 이름을 쓰면 경고와 함께 새 이름으로 옮겨집니다.
playing을 State 값으로 두면 버튼으로 재생과 멈춤을 조작할 수 있습니다. 브라우저 재생 막대로 멈췄을 때도 State가 맞도록 on_play·on_pause에서 값을 고쳐 줍니다. on_time_update는 초당 약 4번 일어나므로, .throttle(500)으로 0.5초에 한 번만 서버에 보냅니다.
0 / 0 s
Finished: 0
class AudioPlayerState(rx.State):
playing: bool = False
status: str = "loading"
duration: float = 0.0
position: float = 0.0
finished: int = 0
@rx.event
def toggle(self):
self.playing = not self.playing
@rx.event
def mark_ready(self):
self.status = "ready"
@rx.event
def mark_play(self):
self.playing = True
self.status = "playing"
@rx.event
def mark_pause(self):
self.playing = False
self.status = "paused"
@rx.event
def mark_ended(self):
self.playing = False
self.status = "ended"
self.finished += 1
@rx.event
def got_duration(self, seconds: float):
self.duration = round(seconds, 1)
@rx.event
def got_time(self, seconds: float):
self.position = round(seconds, 1)
rx.vstack(
rx.audio(
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
playing=AudioPlayerState.playing,
width="100%",
height="54px",
on_ready=AudioPlayerState.mark_ready,
on_play=AudioPlayerState.mark_play,
on_pause=AudioPlayerState.mark_pause,
on_ended=AudioPlayerState.mark_ended,
on_duration_change=AudioPlayerState.got_duration,
on_time_update=AudioPlayerState.got_time.throttle(500),
),
rx.flex(
rx.button(
rx.cond(AudioPlayerState.playing, rx.icon("pause"), rx.icon("play")),
rx.cond(AudioPlayerState.playing, "Pause", "Play"),
on_click=AudioPlayerState.toggle,
),
rx.badge(AudioPlayerState.status, variant="soft"),
rx.text(AudioPlayerState.position, " / ", AudioPlayerState.duration, " s", size="2"),
rx.text("Finished: ", AudioPlayerState.finished, size="2", color_scheme="gray"),
spacing="3",
align="center",
wrap="wrap",
),
width="100%",
spacing="3",
)브라우저는 사용자가 페이지에서 아무것도 누르지 않았을 때 소리가 나는 자동 재생을 막습니다. 그래서 페이지가 열리자마자 playing=True로 소리를 내려고 하면 재생되지 않을 수 있습니다. 소리는 버튼을 누른 다음 재생하는 것이 안전합니다. 소리 없이 시작하는 것은 muted=True일 때만 허용됩니다.
사용자가 소리 파일을 올리게 하려면 Upload 페이지를 보세요. 올리고, Python으로 처리하고, 재생하고, 내려받는 전체 흐름은 공식 문서의 오디오 워크플로 예제에 있습니다.
재생 막대는 숨기고(controls=False, 크기 0), 미리 듣기 버튼과 음량 버튼만 보입니다. 재생이 끝나면 on_ended가 playing을 되돌려, 버튼을 다시 누를 수 있게 됩니다.
Order alert sound
0.5
class AudioChimeState(rx.State):
playing: bool = False
volume: float = 0.5
@rx.event
def play(self):
self.playing = True
@rx.event
def stop(self):
self.playing = False
@rx.event
def change_volume(self, step: float):
self.volume = min(1.0, max(0.0, round(self.volume + step, 1)))
rx.card(
rx.flex(
rx.icon("bell-ring", color=rx.color("indigo", 10)),
rx.text("Order alert sound", weight="medium"),
rx.spacer(),
rx.icon_button(rx.icon("volume-1"), on_click=AudioChimeState.change_volume(-0.1), variant="soft", size="1", aria_label="Quieter"),
rx.text(AudioChimeState.volume, size="2", min_width="2em", text_align="center"),
rx.icon_button(rx.icon("volume-2"), on_click=AudioChimeState.change_volume(0.1), variant="soft", size="1", aria_label="Louder"),
rx.button(rx.icon("play"), "Preview", on_click=AudioChimeState.play, size="1", loading=AudioChimeState.playing),
spacing="2",
align="center",
),
rx.audio(
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
playing=AudioChimeState.playing,
volume=AudioChimeState.volume,
controls=False,
on_ended=AudioChimeState.stop,
on_pause=AudioChimeState.stop,
width="0",
height="0",
),
max_width="420px",
)공방 노트
rx.audio(src="…"). 외부 주소나 assets 경로(/test.mp3). rx.video와 같은 부품이다.
playing·loop·muted·volume(0~1)은 State 값으로 조작한다. controls 기본값은 True.
on_play·on_pause·on_ended로 State를 맞추고, on_time_update는 .throttle로 줄인다.
소리 자동 재생은 브라우저가 막는다. 사용자가 누른 뒤 재생한다.
0.10 이름: src, on_duration_change, on_seeked (url, on_duration, on_seek는 옛 이름).
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.