audio - Český HTML 5 manuál

HTML a CSS Manuál Multimédia audio - Český HTML 5 manuál

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

HTML5 mění smysl jazyka HTML jako takového. Web se totiž časem mění a stále častěji obsahuje multimediálně bohatý obsah. Tomu se HTML5 přizpůsobilo a nabízí tagy pro přehrávání zvuků a videí. Bohužel celé toto téma není tak jednoduché kvůli tzv. kodekům.

<audio> je párový tag, sloužící k vložení zvukové stopy do HTML dokumentu. Je podporován všemi moderními prohlížeči, ve starších prohlížečích se zobrazí alternativní text, uvedený mezi tagy <audio> a </audio>.

Atributy

Elementu můžeme přiřadit následující atributy:

  • autoplay - Atribut je typu boolean. Pokud je uveden, spustí se zvuk automaticky, ihned po načtení.
  • controls - Atribut je typu boolean. Pokud je uveden, zobrazí se přehrávač s ovládacími prvky. Pokud ne, není element nijak zobrazen.
  • loop - Atribut je typu boolean. Pokud je uveden, je zvuková stopa přehrávána s opakováním stále dokola.
  • preload - Umožňuje nastavit načítání média do paměti, což urychlí jeho přehrání po kliknutí, ale zpomalí načtení stránky. Při hodnotě auto se po načtení stránky načte do paměti celý audio soubor. Při hodnotě metadata se načte pouze hlavička. Při hodnotě none se soubor do paměti nenačte.
  • src - Specifikuje umístění zvukového souboru. Soubor můžeme vložit přímo, pomocí atributu src nebo pomocí elementu <source>.

Ukázka použití

Jednoduché vložení audio souboru do HTML stránky by mohlo vypadat takto:

<audio src="audio/skladba.mp3" controls="controls">
    Váš prohlížeč nepodporuje vkládání zvukových souborů, soubor si
    <a href="audio/skladba.mp3">stáhněte</a>.
</audio>

A výsledek:

Ukazka HTML 5 tagu audio

Zdroj média můžeme také vložit pomocí tagu <source> (dále viz článek), tímto způsobem lze specifikovat několik zdrojových souborů a prohlížeč si vybere ten, který se mu zrovna hodí. Více v popisu tagu <source>.

<audio autoplay controls>
        <source src="Kalimba.mp3" />
        <source src="Kalimba.wav" />
        <source src="Kalimba.ogg" />
</audio>

Kodeky audia

Pro úplnost si uvedeme podporu formátů pro audio:

  IE Mozzila Chrome
MP3 Ano Ne Ano
OGG Ne Ano Ano
WAV Ne Ano Ano

Nároky na datový provoz

Možná vás napadá co se stane, když prohlížeč podporuje více formátů, ze kterých jste mu dali na výběr. Je to jednoduché, prohlížeč si vybere ten první, který bude fungovat.

Vzhledem k tomu, že mobilní operátoři mají celkem nízký FUP (datový limit), tak je vhodné jako první dávat vždy ten formát s lepší kompresí.

U našeho ukázkového audia by to bylo následující: OGG < MP3 < WAV

WAV je mnohem větší než ostatní, a proto je vhodné ho dávat na konec.


 

Stáhnout

Staženo 242x (9.84 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
3 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Multimédia - Český HTML 5 manuál
Aktivity (1)

 

 

Komentáře

Avatar
Leonit
Člen
Avatar
Leonit:22.7.2013 20:32

Ahoj, proč odkaz na stažení v

<audio src="audio/skladba.mp3" controls="controls">
    Váš prohlížeč nepodporuje vkládání zvukových souborů, soubor si
    <a href="audio/skladba.mp3">stáhněte</a>.
</audio>

nefunguje. Když ho dám v kódu mimo, tak funguje. Nebo je to autorův překlep?

Odpovědět 22.7.2013 20:32
Když už člověk jednou je, tak má koukat aby byl. A když kouká, aby byl, a je, tak má být to, co je, a nemá být to, co...
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Leonit
Daniel Vítek:23.7.2013 10:34

Překlep to není. Stačí, když si přečteš 2. větu pod tím nadpisem <audio> - "Je podporován všemi moderními prohlížeči, ve starších prohlížečích se zobrazí alternativní text, uvedený mezi tagy <audio> a </audio>."
Ten odkaz se tam zobrazí, když prohlížeč nepodporuje tag <audio>.

 
Odpovědět 23.7.2013 10:34
Avatar
Leonit
Člen
Avatar
Odpovídá na Daniel Vítek
Leonit:23.7.2013 13:07

Jaj, moje chyba. Omlouvám se a děkuji za dovysvětlení.

Odpovědět 23.7.2013 13:07
Když už člověk jednou je, tak má koukat aby byl. A když kouká, aby byl, a je, tak má být to, co je, a nemá být to, co...
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Leonit
Daniel Vítek:23.7.2013 13:18

Nevadí ;) Klidně se ptej, od toho tu přeci jsme.

 
Odpovědět 23.7.2013 13:18
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:3.10.2013 20:51

btw. David Čápka

preload - Umožňuje nastavit načítání média do paměti, což urychlí jeho přehrání po kliknutí, ale zpomalí načtení **ztránky**.
 
Odpovědět 3.10.2013 20:51
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.