ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Multimedia

Audio

rx.audio

Documentación oficial

Pedido del taller

En los ajustes del panel de gestión de la tienda, añade un apartado para escuchar el aviso de pedido nuevo y ajustar su volumen.

rx.audio es un reproductor de archivos de sonido. En src va la dirección del sonido: puede ser externa o, para test.mp3 en la carpeta assets, src="/test.mp3". Por dentro es react-player, la misma pieza que rx.video, así que las propiedades y los eventos son idénticos.

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

Prueba las propiedades

Reproducir y pausar también son propiedades. Si activas playing, suena; si lo desactivas, se para. Si desactivas controls, desaparece la barra de reproducción del navegador, y entonces lo controlas tú con el State y botones.

Prueba las propiedades

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 reproduce o detiene, y volume (0~1) fija el volumen. Con loop activado, al terminar vuelve a empezar.

Propiedad	Valores	Por defecto	Uso
`src`	dirección, lista de direcciones, lista de `{"src": …, "type": …}`	ninguno	Sonido que se reproduce
`playing`	`True` / `False`	`False`	Reproducir / pausar
`controls`	`True` / `False`	`True`	Mostrar la barra de reproducción del navegador
`loop`	`True` / `False`	`False`	Volver a empezar al terminar
`volume`	`0` ~ `1`	`1`	Volumen
`muted`	`True` / `False`	`False`	Silenciar
`config`	dict	ninguno	Ajustes por tipo de reproductor (`{"youtube": {…}}`, etc.)
`disable_remote_playback`	`True` / `False`	`False`	Desactivar la reproducción en otro dispositivo (cast)
`light`	`True` / `False`	`False`	Muestra solo una vista previa en lugar del reproductor y lo abre al pulsar (página de Video)
`width` · `height`	tamaño CSS	tamaño del contenido	Tamaño del reproductor

Evento	Valor que pasa	Cuándo
`on_ready`	ninguno	Terminó de cargar y está listo para reproducir
`on_start`	ninguno	Empieza a reproducir por primera vez
`on_play` · `on_pause`	ninguno	Se reproduce · se pausa
`on_playing` · `on_waiting`	ninguno	Empieza a sonar de verdad · espera por el búfer
`on_duration_change`	duración (segundos, float)	Se conoce la duración total
`on_time_update`	posición actual (segundos, float)	Cambia la posición de reproducción (unas 4 veces por segundo)
`on_progress`	`{played, playedSeconds, loaded, loadedSeconds, duration}`	Mientras se descargan datos
`on_seeking` · `on_seeked`	ninguno · posición (segundos)	Moviendo la posición · movida
`on_rate_change`	velocidad de reproducción (float)	Cambia la velocidad de reproducción
`on_ended`	ninguno	Se reprodujo hasta el final (no ocurre con `loop`)
`on_error`	ninguno	Error durante la reproducción
`on_click_preview`	ninguno	Se pulsó la vista previa de `light`
`on_enter_picture_in_picture` · `on_leave_picture_in_picture`	ninguno	Entra en · sale de imagen en imagen

Reflex pone controls a True por defecto (en react-player, el valor por defecto es False). Los nombres antiguos como url, on_duration u on_seek pasaron en 0.10 a src, on_duration_change y on_seeked; si usas los antiguos, se convierten a los nuevos con un aviso.

Seguir el estado de reproducción con eventos

Si playing es un valor del State, puedes reproducir y parar con botones. Para que el State siga cuadrando aunque se pare con la barra del navegador, corrige el valor en on_play y on_pause. on_time_update ocurre unas 4 veces por segundo, así que con .throttle(500) solo se envía al servidor una vez cada medio segundo.

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

Las reglas de reproducción automática del navegador

El navegador bloquea la reproducción automática con sonido si el usuario aún no ha pulsado nada en la página. Por eso, si intentas que suene con playing=True nada más abrir la página, puede que no se reproduzca. Lo seguro es reproducir el sonido después de que se pulse un botón. Empezar a reproducir sin interacción solo se permite con muted=True.

Si quieres que los usuarios suban archivos de sonido, consulta la página de Upload. El flujo completo de subir, procesar con Python, reproducir y descargar está en el ejemplo de flujo de audio de la documentación oficial.

Completar el pedido

Ocultamos la barra de reproducción (controls=False, tamaño 0) y solo se ven los botones de escuchar y de volumen. Al terminar la reproducción, on_ended devuelve playing a su valor, y el botón se puede volver a pulsar.

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

Notas del taller

rx.audio(src="…"). Dirección externa o ruta de assets (/test.mp3). Es la misma pieza que rx.video.
playing, loop, muted y volume (0~1) se controlan con valores del State. controls es True por defecto.
Cuadra el State con on_play, on_pause y on_ended, y reduce on_time_update con .throttle.
El navegador bloquea la reproducción automática con sonido. Reproduce tras una pulsación del usuario.
Nombres de 0.10: src, on_duration_change, on_seeked (url, on_duration y on_seek son los antiguos).

← Anterior

Multimedia · Image

Multimedia · Video

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

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

Built with Reflex