ReflexKR

Reflex公式ドキュメント

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

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

コンポーネント工房：Reflexライブラリ100

メディア

Audio

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")

playing で再生と停止を、volume（0〜1）で音量を決めます。loop をオンにすると、最後まで再生しても最初から繰り返します。

プロパティ	値	既定値	用途
`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）	再生位置が変わった（1秒に約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 は1秒に約4回発生するので、.throttle(500) で0.5秒に1回だけサーバーへ送ります。

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 は古い名前）。

← 前へ

メディア · Image

メディア · Video

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex