ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Medien

Audio

rx.audio

Offizielle Doku

Werkstattauftrag

Bitte in den Einstellungen der Ladenverwaltung einen Bereich, in dem man den Signalton für neue Bestellungen probehören und die Lautstärke einstellen kann.

rx.audio ist ein Player, der Audiodateien abspielt. In src steht die Adresse des Tons. Externe Adressen gehen, und für test.mp3 im assets-Ordner schreibst du src="/test.mp3". Darunter steckt react-player, derselbe Baustein wie bei rx.video, deshalb sind Props und Events identisch.

rx.audio(
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
    width="100%",
    height="54px",
)

Props ausprobieren

Auch Abspielen und Pausieren sind Props: Schaltest du playing ein, läuft die Wiedergabe, schaltest du es aus, stoppt sie. Ohne controls verschwindet die Wiedergabeleiste des Browsers; dann steuerst du selbst über State und Buttons.

Props ausprobieren

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 schaltet zwischen Wiedergabe und Stopp, volume (0 bis 1) regelt die Lautstärke. Mit loop beginnt die Wiedergabe am Ende wieder von vorn.

Prop	Werte	Standard	Verwendung
`src`	Adresse, Liste von Adressen, Liste von `{"src": …, "type": …}`	keiner	Der abzuspielende Ton
`playing`	`True` / `False`	`False`	Wiedergabe / Pause
`controls`	`True` / `False`	`True`	Wiedergabeleiste des Browsers anzeigen
`loop`	`True` / `False`	`False`	Am Ende von vorn beginnen
`volume`	`0` bis `1`	`1`	Lautstärke
`muted`	`True` / `False`	`False`	Stummschalten
`config`	dict	keiner	Einstellungen je Playertyp (`{"youtube": {…}}` usw.)
`disable_remote_playback`	`True` / `False`	`False`	Wiedergabe auf anderen Geräten (Cast) abschalten
`light`	`True` / `False`	`False`	Statt des Players nur eine Vorschau, ein Klick öffnet den Player (siehe Video)
`width` · `height`	CSS-Größe	Inhaltsgröße	Größe des Players

Event	Übergebener Wert	Wann
`on_ready`	keiner	Fertig geladen und bereit zur Wiedergabe
`on_start`	keiner	Wiedergabe beginnt zum ersten Mal
`on_play` · `on_pause`	keiner	Wiedergabe gestartet · pausiert
`on_playing` · `on_waiting`	keiner	Ton ist tatsächlich zu hören · Warten wegen Pufferung
`on_duration_change`	Länge (Sekunden, float)	Gesamtlänge ist bekannt
`on_time_update`	aktuelle Position (Sekunden, float)	Wiedergabeposition ändert sich (etwa 4-mal pro Sekunde)
`on_progress`	`{played, playedSeconds, loaded, loadedSeconds, duration}`	Während Daten geladen werden
`on_seeking` · `on_seeked`	keiner · Position (Sekunden)	Position wird verschoben · wurde verschoben
`on_rate_change`	Wiedergabegeschwindigkeit (float)	Geschwindigkeit ändert sich
`on_ended`	keiner	Bis zum Ende abgespielt (tritt bei `loop` nicht ein)
`on_error`	keiner	Fehler bei der Wiedergabe
`on_click_preview`	keiner	Klick auf die `light`-Vorschau
`on_enter_picture_in_picture` · `on_leave_picture_in_picture`	keiner	Bild-im-Bild betreten · verlassen

Reflex setzt den Standard für controls auf True (react-player selbst hat False). Ältere Namen wie url, on_duration und on_seek heißen in 0.10 src, on_duration_change und on_seeked; verwendest du die alten Namen, gibt es eine Warnung, und sie werden auf die neuen übertragen.

Wiedergabezustand über Events verfolgen

Ist playing ein State-Wert, steuerst du Wiedergabe und Stopp mit Buttons. Damit der State auch stimmt, wenn jemand über die Wiedergabeleiste des Browsers anhält, korrigierst du den Wert in on_play und on_pause. on_time_update feuert etwa 4-mal pro Sekunde, deshalb schickst du es mit .throttle(500) nur alle 0,5 Sekunden an den Server.

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

Autoplay-Regeln der Browser

Browser blockieren automatische Wiedergabe mit Ton, solange auf der Seite noch nichts angeklickt wurde. Versuchst du also, gleich beim Öffnen der Seite mit playing=True Ton abzuspielen, klappt das womöglich nicht. Sicher ist es, Ton erst nach einem Klick auf einen Button abzuspielen. Ohne Ton zu starten ist nur mit muted=True erlaubt.

Sollen Nutzer Audiodateien hochladen, sieh dir die Seite zu Upload an. Den ganzen Ablauf aus Hochladen, Verarbeiten mit Python, Abspielen und Herunterladen zeigt das Audio-Workflow-Beispiel in der offiziellen Doku.

Auftrag erledigt

Die Wiedergabeleiste ist versteckt (controls=False, Größe 0), sichtbar sind nur der Probehör-Button und die Lautstärke-Buttons. Ist die Wiedergabe zu Ende, setzt on_ended den Wert von playing zurück, sodass der Button wieder gedrückt werden kann.

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

Werkstattnotizen

rx.audio(src="…"). Externe Adresse oder assets-Pfad (/test.mp3). Derselbe Baustein wie rx.video.
playing, loop, muted und volume (0 bis 1) steuerst du über State-Werte. controls ist standardmäßig True.
Mit on_play, on_pause und on_ended den State abgleichen; on_time_update mit .throttle drosseln.
Automatische Wiedergabe mit Ton blockiert der Browser. Erst nach einem Klick abspielen.
Namen in 0.10: src, on_duration_change, on_seeked (url, on_duration und on_seek sind die alten Namen).

← Zurück

Medien · Image

Weiter →

Medien · Video

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

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

Built with Reflex