Mediální element

<audio>

Zvuk. Podcast, nahrávka nebo hudba s přehrávačem přímo ve stránce.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Přehrávač jedním řádkem

audio funguje stejně jako video, jen bez obrazu. controls zobrazí přehrávač. Bez něj by zvuk na stránce vůbec nebyl vidět.

Pusťte si nahrávku v náhledu. Má asi deset vteřin.

Formáty

Soubor, který přehraje každý

Jako u videa můžeme nabídnout víc formátů přes source. Nejjistější jsou mp3 a m4a (zvuk AAC). Text na konci je záchrana pro prohlížeč, který neumí nic z nabídky.

Atributy

Co zapnout a co ne

preload="metadata" stáhne jen délku nahrávky. loop ji pouští dokola. autoplay raději nepoužívejte.

Zvuk, který se spustí sám, lidi vyleká a screen readeru přehluší hlas. Prohlížeče ho proto většinou samy zablokují.

Přístupnost

Přepis nahrávky

Neslyšící nahrávku neuslyší a vyhledávač ji nepřečte. Přidáme proto přepis. Aby nezabíral místo, schováme ho do rozbalovacího details.

Styl

Karta epizody

Vzhled přehrávače si určuje prohlížeč a změnit ho skoro nejde. Můžeme ale nastylovat okolí: kartu, nadpis a šířku přehrávače.

Vlastní tlačítka přehrávače se dělají s JavaScriptem. Vestavěné ovládání ale funguje s klávesnicí i screen readerem, a to se vyplatí.

Styl

Obal epizody

Přidáme obrázek a rozložíme kartu pojmenovanými oblastmi. Obal vlevo, nadpis a přehrávač vpravo, přepis přes celou šířku dole.

Obrázek je jen ozdoba, nadpis epizody je hned vedle. Proto má prázdný alt="".

Responzivita

Přehrávač přes celou šířku

Na telefonu by vedle obalu zbyl na přehrávač jen proužek a slider by se nedal ovládat. Obal zmenšíme a přehrávač přesuneme pod něj přes celou šířku.

Díky pojmenovaným oblastem stačí přepsat mapu. HTML zůstává stejné.

Shrnutí

Jak vkládat zvuk

Ano

• controls a preload="metadata"
• formát mp3 nebo m4a
• přepis pro ty, kdo neslyší
• na telefonu přehrávač přes celou šířku

Ne

• autoplay se zvukem
• zvuk bez ovládání, který nejde zastavit

Další: <iframe> →