# Lejátszási lista blokk (Playlist)

> Hangfájlok gyűjteménye egyetlen lejátszóban: számok hozzáadása, hullámforma, beállítások, tippek és hibaelhárítás.

A **Playlist** blokk (a szerkesztőben jelenleg ezen az angol néven látszik) hangfájlok gyűjteményét teszi a tartalomba, egyetlen lejátszóval. Az olvasó böngészhet a számok között, sorrendben vagy véletlenszerűen játszhatja le őket, a pillanatnyi szám haladását pedig interaktív hullámforma mutatja. Minden szám megjeleníti a saját adatait: a címet, az előadót, a sorszámot, a hosszt és a borítóképet.

## A blokk hozzáadása

1. Nyiss meg egy bejegyzést vagy oldalt a szerkesztőben.
2. Állj oda a kurzorral, ahová a lejátszási listát szánod.
3. Kattints a **+** gombra, keresd meg a **Playlist** blokkot, és kattints rá.

Egy üres sorba írt `/playlist` és az Enter is beszúrja.

## Számok hozzáadása

1. Jelöld ki a Playlist blokkot.
2. Tölts fel egy vagy több hangfájlt, vagy válassz a **Médiatárból**.
3. Minden hangfájl számként kerül a listába.

Ha a hangfájlban vannak metaadatok, a blokk megjeleníti a szám címét, előadóját, sorszámát és hosszát. Ha egy számhoz kép is tartozik, az bélyegképként látszik a számok listájában, és lejátszás közben a lejátszógombban is.

![A kijelölt Playlist blokk három számmal, fölötte a hullámformás lejátszó](./kepek/blokkok-lejatszasi-lista-szerkeszto.webp)

*A kijelölt Playlist blokk három számmal, fölötte a hullámformás lejátszó* (https://minta-bolt.hu/wp-admin/post.php?post=33&action=edit)

A képen három szám látszik: címmel, előadóval és hosszal. Fölöttük a lejátszógomb és a hullámforma van, mellette az aktuális szám címe és az idő. Az eszköztáron az **Add track** gombbal újabb számot vehetsz fel.

## Lejátszás az oldalon

A kész oldalon az olvasó:

- a hullámformás lejátszó lejátszógombjával elindítja vagy megállítja a lejátszást;
- bármelyik számra kattintva elindítja azt;
- az éppen szóló számra újra kattintva szünetelteti. Fókuszált számon az Enter indít, a szóköz (vagy újabb Enter) szüneteltet.

A számok melletti műveletfelirat a pillanatnyi állapotnak megfelelően vált Lejátszás és Szünet között, így a képernyőolvasót használók mindig tudják, mi történik a kijelöléssel.

## A hullámformás lejátszó

A blokk a böngészők saját hangvezérlője helyett hullámformás lejátszót használ, amely minden böngészőben egyformán néz ki és viselkedik.

- A hullámforma a hang alakját mutatja, és lejátszás közben kitöltődik, így látod a haladást.
- Kattintással vagy koppintással a hullámforma bármelyik pontjára ugorhatsz.
- Billentyűzettel: ha a lejátszó fókuszban van, a bal és jobb nyíllal tekerhetsz hátra vagy előre.

Ha a lista másik számra lép, a hullámforma és a lejátszógomb képe magától frissül.

## Az eszköztár

- **Átalakítás:** a blokkot például Oszlopok vagy Csoport blokkká alakítja.
- **Igazítás módosítása** és a képcsere gomb mellett az **Add track** gomb új számot vesz fel.
- **Húzás** és **Mozgatás fel / le:** a blokk áthelyezése.
- **Beállítások** (három pont): másolás, kettőzés, törlés, zárolás és más szokásos műveletek.

## A beállítások

Az oldalsávon két fül van: **Beállítások** (fogaskerék) és **Stílusok** (félig kitöltött kör).

### Beállítások fül

| Beállítás | Mit csinál |
|---|---|
| **Show tracklist** | a számok listájának megjelenítése |
| **Előadó nevének megjelenítése a számlistában** | az előadó neve látszik minden számnál |
| **Show track numbers in tracklist** | a sorszám a listában |
| **Show track duration in tracklist** | a számok hossza a listában |
| **Show tracklist images** | a számok bélyegképe a listában |
| **Show track image on play button** | a szám képe a lejátszógombban |
| **Sorrend** | a számok sorrendje: **Növekvő** vagy más rendezés |

![A Playlist blokk Stílusok füle: betűkészlet, háttér és méretek](./kepek/blokkok-lejatszasi-lista-stilusok.webp)

*A Playlist blokk Stílusok füle: betűkészlet, háttér és méretek* (https://minta-bolt.hu/wp-admin/post.php?post=33&action=edit)

### Stílusok fül

A képen a **Stílusok** fül látszik. A színek egy panelben vannak, köztük a blokkra jellemző két beállítással: a hullámforma színe (ez a lejátszógombra is vonatkozik) és a hullámforma háttere. Mindkettő lehet egyszínű vagy színátmenetes, így a lejátszó illeszthető a webhely arculatához.

| Panel | Mit állíthatsz |
|---|---|
| **Betűkészlet** | szín és betűméret (a számcímekre és adatokra) |
| **Háttér** | háttérszín vagy színátmenet |
| **Méretek** | helykitöltés és margó |
| **Haladó** | HTML-horgony, további CSS-osztályok |

A hullámforma stílusa (például oszlopok) szintén a **Stílusok** fülön választható. A színválaszték a használt témától függ.

## Tippek

- A számok felvétele előtt add meg a címet és az előadót a **Médiatárban**, hogy a lista azonnal tájékoztató legyen.
- Csatolj minden hangfájlhoz képet, ha szeretnél borítót látni a listában és a lejátszógombban. Ha nem akarsz borítót, ne csatolj képet.
- A hullámforma és a háttér színével (színátmenettel is) illeszd a lejátszót a webhelyed megjelenéséhez.
- Olyan listánál, ahol a sorrend mindegy (például háttérzene), válaszd a véletlenszerű lejátszást.

## Gyakori kérdések

**Szüneteltetheti az olvasó a számot a listából?** Igen. Az éppen szóló számra kattintva szünetel, újabb kattintásra folytatódik. Ugyanezt teszi a szóköz vagy az Enter egy fókuszált számon.

**Elrejthetem a borítót, az előadót, a sorszámot vagy a hosszt?** Igen, mindegyiknek külön kapcsolója van a blokk beállításai között.

**Minden böngészőben működik a hullámforma?** Igen, a lejátszó minden böngészőben egyformán jelenik meg, a böngészőnként eltérő alap hangvezérlők helyett.

**Lehet színátmenetes a hullámforma?** Igen, a hullámforma és a háttere is lehet egyszínű vagy színátmenetes.

## Hibaelhárítás

**Nem látszanak a szám adatai:**

- Nézd meg a hangfájl adatait a **Médiatárban**: a cím, az előadó és más adatok a fájl metaadataiból és a Médiatár mezőiből jönnek.
- Ellenőrizd, hogy a megfelelő kapcsolók be vannak kapcsolva a blokk beállításai között.

**Nem jelenik meg a borító:**

- Ellenőrizd, hogy a hangfájlhoz tartozik kép. Kép nélküli számnál nincs borító.
- Nézd meg, hogy a **Show tracklist images** kapcsoló be van kapcsolva.

**A hullámforma színei nem illenek a témához:**

- Állíts be kifejezetten hullámforma- és háttérszínt a blokk színbeállításai között, ne a témától örökölt színekre hagyatkozz.