Pouze tento týden sleva až 80 % na e-learning týkající se Javy. Zároveň využij akce až 50 % zdarma při nákupu e-learningu - více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
java week + discount 50

audio - Český HTML 5 manuál

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žením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Všechny články v sekci
Multimédia - Český HTML 5 manuál
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
3 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

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
Tvůrce
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
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
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
Tvůrce
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
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Daniel Vítek
Tvůrce
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
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
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.