Audio player — OutfitKit

Audio player

Reproductor de audio con cover, info, transporte y barra de progreso. Construido a partir de primitivos: no existe ningún componente AudioPlayer en OutfitKit. Es composición de un Card + Thumbnail + Buttons de transporte + ProgressBar. Consulta el ejemplo completo en examples/mini-apps/audio_player.html.

Composición: Card + fila .head con Thumbnail (cover) + .heading (.title + .meta) + Button icon_onlys para play/skip + barra ProgressBar.

Compacto · sin cover

Briefing diario · L2

Operaciones · 00:34 / 02:14

<div class="card" style="max-width:480px;width:100%">
  <div class="head row" style="gap:12px;align-items:center">
    <button class="btn brand icon"><iconify-icon icon="lucide:play" width="16"></iconify-icon></button>
    <div class="heading" style="flex:1"><div class="title sm">Briefing diario · L2</div><div class="meta">Operaciones · 00:34 / 02:14</div></div>
    <button class="btn ghost icon"><iconify-icon icon="lucide:skip-forward" width="16"></iconify-icon></button>
  </div>
  <div class="body" style="padding-top:0">
    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25"><div class="progress-bar" style="width:25%"></div></div>
  </div>
</div>

<Card attrs={"style": "max-width:480px"}>
  <div class="head row" style="gap:12px;align-items:center">
    <Button icon="lucide:play" icon_only variant="brand" />
    <div class="heading" style="flex:1">
      <div class="title sm">Briefing diario · L2</div>
      <div class="meta">Operaciones · 00:34 / 02:14</div>
    </div>
    <Button icon="lucide:skip-forward" icon_only variant="ghost" />
  </div>
  <div class="body" style="padding-top:0">
    <ProgressBar value="25" />
  </div>
</Card>

<Card attrs={"style": "max-width:480px"}>
  <div class="head row" style="gap:12px;align-items:center">
    <Button icon="lucide:play" icon_only variant="brand" />
    <div class="heading" style="flex:1">
      <div class="title sm">Briefing diario · L2</div>
      <div class="meta">Operaciones · 00:34 / 02:14</div>
    </div>
    <Button icon="lucide:skip-forward" icon_only variant="ghost" />
  </div>
  <div class="body" style="padding-top:0">
    <ProgressBar value="25" />
  </div>
</Card>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Default · con cover

Sesión QA · cabina pintura

Equipo Calidad · 01:35 / 04:48

<div class="card" style="max-width:480px;width:100%">
  <div class="head row" style="gap:12px;align-items:center">
    <div class="thumbnail"><img src="https://picsum.photos/seed/audio2/64/64" loading="lazy"/></div>
    <div class="heading" style="flex:1"><div class="title sm">Sesión QA · cabina pintura</div><div class="meta">Equipo Calidad · 01:35 / 04:48</div></div>
  </div>
  <div class="body">
    <div class="row" style="justify-content:center;gap:6px">
      <button class="btn ghost sm icon"><iconify-icon icon="lucide:skip-back" width="16"></iconify-icon></button>
      <button class="btn brand icon"><iconify-icon icon="lucide:play" width="16"></iconify-icon></button>
      <button class="btn ghost sm icon"><iconify-icon icon="lucide:skip-forward" width="16"></iconify-icon></button>
    </div>
    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33"><div class="progress-bar" style="width:33%"></div></div>
  </div>
</div>

<Card attrs={"style": "max-width:480px"}>
  <div class="head row" style="gap:12px;align-items:center">
    <Thumbnail src="https://picsum.photos/seed/audio2/64/64" size="md" />
    <div class="heading" style="flex:1">
      <div class="title sm">Sesión QA · cabina pintura</div>
      <div class="meta">Equipo Calidad · 01:35 / 04:48</div>
    </div>
  </div>
  <div class="body">
    <div class="row" style="justify-content:center;gap:6px">
      <Button icon="lucide:skip-back" icon_only variant="ghost" size="sm" />
      <Button icon="lucide:play" icon_only variant="brand" />
      <Button icon="lucide:skip-forward" icon_only variant="ghost" size="sm" />
    </div>
    <ProgressBar value="33" />
  </div>
</Card>

<Card attrs={"style": "max-width:480px"}>
  <div class="head row" style="gap:12px;align-items:center">
    <Thumbnail src="https://picsum.photos/seed/audio2/64/64" size="md" />
    <div class="heading" style="flex:1">
      <div class="title sm">Sesión QA · cabina pintura</div>
      <div class="meta">Equipo Calidad · 01:35 / 04:48</div>
    </div>
  </div>
  <div class="body">
    <div class="row" style="justify-content:center;gap:6px">
      <Button icon="lucide:skip-back" icon_only variant="ghost" size="sm" />
      <Button icon="lucide:play" icon_only variant="brand" />
      <Button icon="lucide:skip-forward" icon_only variant="ghost" size="sm" />
    </div>
    <ProgressBar value="33" />
  </div>
</Card>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Full · reproduciéndose

Briefing dirección · cierre Q1

Dirección General

07:24 / 18:02

×1.5

Progreso42%

<div class="card" style="max-width:480px;width:100%">
  <div class="head row" style="gap:14px;align-items:center">
    <div class="thumbnail lg"><img src="https://picsum.photos/seed/audio3/96/96" loading="lazy"/></div>
    <div class="heading" style="flex:1"><h3 class="title">Briefing dirección · cierre Q1</h3><div class="meta">Dirección General</div><div class="meta">07:24 / 18:02</div></div>
  </div>
  <div class="body">
    <div class="row" style="justify-content:space-between;align-items:center">
      <span class="chip outline sm">×1.5</span>
      <div class="row" style="gap:6px">
        <button class="btn ghost icon"><iconify-icon icon="lucide:skip-back" width="16"></iconify-icon></button>
        <button class="btn brand lg icon"><iconify-icon icon="lucide:pause" width="16"></iconify-icon></button>
        <button class="btn ghost icon"><iconify-icon icon="lucide:skip-forward" width="16"></iconify-icon></button>
      </div>
      <button class="btn ghost sm icon"><iconify-icon icon="lucide:volume-2" width="16"></iconify-icon></button>
    </div>
    <div class="progress-block">
      <div class="head"><span class="label">Progreso</span><span class="value">42%</span></div>
      <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"><div class="progress-bar" style="width:42%"></div></div>
    </div>
  </div>
</div>

<Card attrs={"style": "max-width:480px"}>
  <div class="head row" style="gap:14px;align-items:center">
    <Thumbnail src="https://picsum.photos/seed/audio3/96/96" size="lg" />
    <div class="heading" style="flex:1">
      <h3 class="title">Briefing dirección · cierre Q1</h3>
      <div class="meta">Dirección General</div>
      <div class="meta">07:24 / 18:02</div>
    </div>
  </div>
  <div class="body">
    <div class="row" style="justify-content:space-between;align-items:center">
      <Chip outline size="sm">×1.5</Chip>
      <div class="row" style="gap:6px">
        <Button icon="lucide:skip-back" icon_only variant="ghost" />
        <Button icon="lucide:pause" icon_only variant="brand" size="lg" />
        <Button icon="lucide:skip-forward" icon_only variant="ghost" />
      </div>
      <Button icon="lucide:volume-2" icon_only variant="ghost" size="sm" />
    </div>
    <ProgressBar value="42" label="Progreso" value_text="42%" />
  </div>
</Card>

<Card attrs={"style": "max-width:480px"}>
  <div class="head row" style="gap:14px;align-items:center">
    <Thumbnail src="https://picsum.photos/seed/audio3/96/96" size="lg" />
    <div class="heading" style="flex:1">
      <h3 class="title">Briefing dirección · cierre Q1</h3>
      <div class="meta">Dirección General</div>
      <div class="meta">07:24 / 18:02</div>
    </div>
  </div>
  <div class="body">
    <div class="row" style="justify-content:space-between;align-items:center">
      <Chip outline size="sm">×1.5</Chip>
      <div class="row" style="gap:6px">
        <Button icon="lucide:skip-back" icon_only variant="ghost" />
        <Button icon="lucide:pause" icon_only variant="brand" size="lg" />
        <Button icon="lucide:skip-forward" icon_only variant="ghost" />
      </div>
      <Button icon="lucide:volume-2" icon_only variant="ghost" size="sm" />
    </div>
    <ProgressBar value="42" label="Progreso" value_text="42%" />
  </div>
</Card>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />