# Audio Player (Audiolejátszó) widget: MP3, podcast és lejátszási lista

> Stílusos hanglejátszó több számmal: lejátszási lista saját vagy külső hangfájlokkal, közös beállítások és hibaelhárítás.

Az **Audio Player** widget stílusos hanglejátszót tesz az oldalra. Egy lejátszási listába több számot is felvehetsz, a médiatárból vagy külső címről. Zenéhez és podcasthoz is jó. A widget a Pro bővítmény része.

## Bekapcsolás

1. Nyisd meg: **The Plus Addons → Widgets**.
2. Keress rá az **Audio Player** névre.
3. Kapcsold be a kapcsolóját.

Az Elementor szerkesztőjében a panelen az **Audiolejátszó** néven találod.

## Lejátszó hozzáadása és stílus kiválasztása

1. Húzd az **Audiolejátszó** widgetet az oldalra.
2. Az **Audiolejátszó** szakasz **Stílusok** legördülőjében válaszd ki a lejátszó kész kinézetét. Kilenc stílus van: **Stílus 1**-től **9. stílus**-ig, alapértelmezetten az első.

![Az Audiolejátszó tartalom szakaszai](./kepek/kepek-media-hanglejatszo-tartalom.webp)

*Az Audiolejátszó tartalom szakaszai* (https://minta-bolt.hu/wp-admin/post.php?post=69&action=elementor)

A képen a widget három tartalmi szakasza látszik: **Audiolejátszó**, **Lejátszási lista** és **Közös beállítás**.

## A lejátszási lista felépítése

A **Lejátszási lista** szakaszban minden elem egy szám. A **Elem hozzáadása** gombbal újabb számot veszel fel.

![Egy lejátszási listaelem kibontva](./kepek/kepek-media-hanglejatszo-lista.webp)

*Egy lejátszási listaelem kibontva* (https://minta-bolt.hu/wp-admin/post.php?post=69&action=elementor)

A képen az első lista elem látszik kibontva, a saját tárhelyről kiválasztott fájllal.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Dal címe** | a lejátszón és a listában megjelenő cím | „ThePlus Audio” |
| **Dal szerzője** | a lejátszón megjelenő szerző | „The Plus” |
| **Forrás** | **Saját tárhelyen tárolt**: a médiatárban lévő fájlt használod; **Külső**: máshol tárolt hangfájl közvetlen címét adod meg | **Külső** |
| **Fájl** / **URL** | maga a hangfájl: a **Fájl** mezőben választod ki a médiatárból, az **URL** mezőbe pedig a közvetlen hivatkozást írod; a forrástól függően az egyik látszik | nincs |
| **Kép** | a szám bélyegképe a listában | nincs |

Mindkét forrásnál ezek a fájltípusok használhatók: `.mp3`, `.wav`, `.ogg`, `.flac`, `.m4a`.

## Közös beállítás

![A Közös beállítás szakasz](./kepek/kepek-media-hanglejatszo-kozos.webp)

*A Közös beállítás szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=69&action=elementor)

A képen a **Közös beállítás** mezői látszanak az alapértékekkel.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Képfelbontás** | a számok bélyegképének mérete | **Tele** |
| **Szöveg felosztása** | a címet és a szerzőt elválasztó szöveg a lejátszón | „által” |
| **Maximális szélesség** | a lejátszó legnagyobb szélessége, képernyőméretenként | nincs megadva |
| **Alapértelmezett hangerő** | a lejátszó kezdő hangereje | 80 |

## Stílus fül

A **Stílus** fülön a lejátszó megjelenését alakíthatod. A szakaszok: **Dal címe**, **Dal szerzője**, **Szöveg felosztása**, **Vezérlő**, **Háttérsáv**, **Sáv képe**, **Lejátszási lista**, **Lejátszó háttere**, **Egyéb opció** és **On Scroll View Animation**.

## A lejátszó a nyilvános oldalon

![Az Audio Player a nyilvános oldalon](./kepek/kepek-media-hanglejatszo.webp)

*Az Audio Player a nyilvános oldalon* (https://minta-bolt.hu/km-hang/)

A képen a lejátszó a szám címével, a szerzővel és a haladássávval látszik.

A **Lejátszás** gombra kattintva a gomb szünet gombra vált, és a böngésző elkéri a hangfájlt.

## Korlátok

- Külső URL esetén a távoli szervernek ténylegesen ki kell szolgálnia a hangfájlt. Ha a szerver szigorú kereszteredetű (CORS) szabályt használ, a böngésző csendben letilthatja, és az oldalon nem jelenik meg hibaüzenet.

## Hibaelhárítás

### A lejátszó betölt, de a Lejátszás gombra nem szól semmi

Ellenőrizd, hogy a hangfájl elérhető-e: nyisd meg a címét közvetlenül egy böngészőlapon. Ha **Külső** forrást használsz, egyes szerverek letiltják a más oldalról érkező hangkéréseket. Ilyenkor töltsd fel a fájlt a saját médiatáradba, és válaszd a **Saját tárhelyen tárolt** forrást.