Cookies

Na naší webové stránce používáme soubory cookies pro její správné fungování, přizpůsobení analytických dat a dynamiky obsahu pro uživatele. Více informací o cookies.

Potvrzením zároveň ukládáte souhlas se zpracováním osobních údajů v rámci nařízení GDPR.

HTML audio

Přehrávání zvukových souborů na webu
Předchozí Další tutoriály

#1 Prvek zvukové stopy

Prvek <audio> vkládá na stránku přehrávatelnou zvukovou stopu.

<audio>
 <source src="audio.mp3" type="audio/mp3">
 Váš prohlížeč nepodporuje přehrávání audia.
</audio>

Jak funguje

Podobně jako prvek pro videa se do prvku audia vkládá nepárový prvek <source>, kterým se odkazuje na adresu videa. S ním souvisí atribut src, který udává adresu souboru a atribut type, který dává prohlížeči informaci o jaký typ souboru se jedná. Text uvnitř prvku <audio> slouží pro prohlížeče, které nepodporují přehrávání audia, text se namísto něj zobrazí.

Podporované formáty pro přehrávání audia naleznete v tomto článku.

#2 Atributy

Atribut controls

Atribut controls uživateli při přehrávání audia zobrazí tlačítka na pozastavení a spuštění, ovládání hlasitosti… Tento atribut je často editory kódu přidáván automaticky, aby si mohli uživatelé video ovládat podle sebe.

<audio controls>
 <source src="audio.mp3" type="audio/mp3">
 Váš prohlížeč nepodporuje přehrávání audia.
</audio>

Automatické přehrávání

S pomocí atributu autoplay lze nastavit, aby se audio začalo po načtení samo přehrávat. Atribut autoplay doplňuje druhý atribut muted, který audio ztlumí při automatickém přehrávání.

<audio controls autoplay muted>
 <source src="audio.mp3" type="audio/mp3">
 Váš prohlížeč nepodporuje přehrávání audia.
</audio>
Tip: Některé prohlížeče nepovolují automatické přehrávání, ale ztlumené automatické přehrávání ano. Pro větší podporu je tedy lepší přidávat k atributu autoplay také atribut muted.