# AudioPlayer mp3 (embedded Audio)

<span style="white-space: pre-wrap;">Mit </span>**Audio einbetten**<span style="white-space: pre-wrap;"> spielst du eine </span>**MP3**<span style="white-space: pre-wrap;"> direkt in der Szene ab – optional mit </span>**Posterbild**<span style="white-space: pre-wrap;">, verschiedenen </span>**Player-Styles**<span style="white-space: pre-wrap;">, </span>**Fallback-Szene**<span style="white-space: pre-wrap;"> und </span>**Buttons nach Ende**<span style="white-space: pre-wrap;">. Außerdem kannst du </span>**Untertitel/Transkripte**<span style="white-space: pre-wrap;"> pro Zeitbereich hinterlegen.</span>

---

## ![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/IYAgrafik.png)Felder

**MP3-URL**  
Direkter Link zur MP3. (Empf.: 128–192 kbps, stereo, &lt; 10–20 MB)

**MP3-Datei auswählen oder hochladen**  
Öffnet die Medienauswahl mit Upload.

**Poster-URL**<span style="white-space: pre-wrap;"> </span>**(optional)**  
Bild, das über/bei dem Player gezeigt wird (z. B. Cover, Sprecher:in).

**Posterbild auswählen oder hochladen**  
Medienauswahl für das Poster.

**Player-Style**

- **Standard (mit Poster)**<span style="white-space: pre-wrap;"> – Player unter einem Posterbild.</span>
- **Embedded**<span style="white-space: pre-wrap;"> – flacher Player ohne großes Poster (kompakt).</span>
- **Round**<span style="white-space: pre-wrap;"> </span>**(falls verfügbar)**<span style="white-space: pre-wrap;"> – runder Play-Button mit Mini-Waveform.</span>

**Fallback-Szene**  
<span style="white-space: pre-wrap;">Wird geöffnet, wenn die Audiodatei </span>**nicht geladen**<span style="white-space: pre-wrap;"> oder </span>**abgespielt**<span style="white-space: pre-wrap;"> werden kann (offline/URL/Codec).</span>

**Untertitel**<span style="white-space: pre-wrap;"> → </span>**Untertitel bearbeiten**  
Öffnet den Untertitel-Editor (siehe unten).

**Text über Buttons**<span style="white-space: pre-wrap;"> </span>**(optional)**  
<span style="white-space: pre-wrap;">Kurzer Hinweis, der </span>**nach dem Abspielen**<span style="white-space: pre-wrap;"> über den End-Buttons erscheint (z. B. „Wie möchtest du weiter machen?“).</span>

**Textfarbe**  
<span style="white-space: pre-wrap;">Farbe des obigen Hinweistexts (Hex, z. B. </span>`<span class="editor-theme-code">#FFF</span>`).

**+ Button hinzufügen**  
<span style="white-space: pre-wrap;">Fügt </span>**End-Buttons**<span style="white-space: pre-wrap;"> mit </span>**Beschriftung**<span style="white-space: pre-wrap;"> und </span>**Zielszene**<span style="white-space: pre-wrap;"> hinzu.</span>

> <span style="white-space: pre-wrap;">Die Buttons erscheinen </span>**erst, wenn das Audio wirklich zu Ende ist**<span style="white-space: pre-wrap;"> – nicht per Timer.</span>

---

## Untertitel-Editor

[![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/5wIgrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/5wIgrafik.png)

- <span style="white-space: pre-wrap;">Oben siehst du eine </span>**Waveform**.
- **Bereich markieren**<span style="white-space: pre-wrap;"> → unten Text eintippen → Eintrag wird erzeugt.</span>
- <span style="white-space: pre-wrap;">Jeder Eintrag zeigt </span>**Start–Ende**<span style="white-space: pre-wrap;"> und </span>**Text**; mit ► spielst du den Ausschnitt ab.
- **Untertitel importieren (VTT)**<span style="white-space: pre-wrap;">: Lade eine </span>**WEBVTT**-Datei, die automatisch in Zeitbereiche + Texte übernommen wird.
- **Fertig – Untertitel speichern**: übernimmt alle Einträge in die Szene.

> Untertitel werden synchron zum Audio angezeigt (barrierearm, auch für laute Umgebungen).

---

<video class="align-left" controls="" height="600" id="bkmrk--4" src="https://docs.scenario.app/attachments/50?open=true" width="300"></video>## Verhalten in der App

1. Poster (falls gesetzt) + Player werden angezeigt.
2. <span style="white-space: pre-wrap;">Play startet die Wiedergabe; je nach Style wird eine </span>**Waveform**<span style="white-space: pre-wrap;"> mit Laufzeitregler gezeigt.</span>
3. **Untertitel**<span style="white-space: pre-wrap;"> laufen synchron mit.</span>
4. <span style="white-space: pre-wrap;">Nach </span>**Audioende**<span style="white-space: pre-wrap;"> blendet die App – falls konfiguriert – </span>**Hinweistext + End-Buttons**<span style="white-space: pre-wrap;"> ein.</span>
5. <span style="white-space: pre-wrap;">Bei Lade-/Abspielfehler öffnet die </span>**Fallback-Szene**.

---

## Best Practices

- **Audioqualität**: 44.1 kHz, 128–192 kbps MP3 reicht mobil völlig.
- **Trimmen**: Stille am Anfang/Ende entfernen → schnelleres Empfinden.
- **Lautheit**: Auf ~–16 LUFS normalisieren, Clipping vermeiden.
- **Poster**: Ruhiges, kontrastreiches Motiv; wirkt professioneller.
- **Untertitel**: Kurze, sinnvolle Segmente (2–6 s), Satzumbrüche vermeiden.
- **Didaktik**: Buttons „Wiederholen“, „Weiter zur Aufgabe“, „Zur Karte“ anbieten.

---

## Kurz-Workflow

1. **MP3**<span style="white-space: pre-wrap;"> und optional </span>**Poster**<span style="white-space: pre-wrap;"> wählen/hochladen.</span>
2. **Player-Style**<span style="white-space: pre-wrap;"> setzen, </span>**Fallback-Szene**<span style="white-space: pre-wrap;"> wählen.</span>
3. **Untertitel bearbeiten**<span style="white-space: pre-wrap;"> (oder </span>**VTT importieren**).
4. **Text über Buttons**<span style="white-space: pre-wrap;"> + </span>**End-Buttons**<span style="white-space: pre-wrap;"> definieren.</span>
5. **Speichern**<span style="white-space: pre-wrap;"> und auf dem Gerät testen.</span>