Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Tvorba upravitelného HTML5 audio přehrávače

by
Difficulty:IntermediateLength:LongLanguages:

Czech (Čeština) translation by Karel Krkoska (you can also view the original English article)

V tomto tutorialu vám představím HTML5 audio a ukáži vám jak si můžete vytvořit svůj vlastní přehrávač.

Pokud chcete zkratku, podívejte se na připravený HTML5 Audio Player na Envato Marketu. Nechává vás vytvořit playlisty z různých zdrojů a obsahuje obrovskou škálu upravitelných možností.

HTML5 Audio Player with Playlist
HTML5 Audio player s playlistem

Také můžete najít spoustu HTML5 expertů na Envato Studio, kteří vám mohou pomoci.


Úvod

Doteď bylo implementování audia na web únavný úkol, který závisel na pluginech třetích stran, jako je Flash. Protože iPhone je známy svým neakceptováním pluginů a novinka, že Adobe již nepodporuje Flash pro mobilní platformu, mnoho vývojařů hledá jiné způsoby, jak zapracovat audio do svých projektů. To je místo, kdy HTML5 audio přichází vyřešit problém.

Ačkoli HTML5 nabízí standard pro přehrávání audio souborů na webu, je stále v plenkách a ještě musí ujít dlouhou cestu, než může nabídnout vše, co nabízel Flash plugin. Pro většinu případu to ale stačí.


Jednoduché Html5 audio

Nejjednodušší způsob implementování audia na web pomocí HTML5 je použít nový audio tag. Přidejte tohle do vašeho HTML5 dokumentu s následujícím kódem:

Pokud se podíváte na kód výše, můžete vidět, že jsem deklaroval <audio> tag a definoval ovládací atribut, tak abychom viděli ovládání přehrávače.

Do <audio> tagu máme vnořené 2 "src" tagy. Jeden definuje MP3 skladbu a další definuje OGG format. OGG formát je speciálně použit pro hudbu ve Firefoxu, protože kvůli problémům s licencí Firefox nepodporuje MP3 formát bez pluginu. A řetězec textu Your browser does not support the audio element. dá uživateli s nepodporovaným prohlížečem vědět co se děje.


Výchozí HTML5 audio přehrávač

Atributy HTML5 Audio tagu

Stejně jako podporování HTML5 atributů, tag také podporuje sadu atributů, pro sebe unikátních.

  • autoplay - tento může být nastaven na "true" nebo zůstat prázdný "" pro definování, jestli má skladba začít hrát automaticky hned, jak se stránka načte.
  • controls - jak je vidět v příkladu výše, tento definuje, jestli ovládací prvky jako jsou "play, pause,.." budou zobrazeny.
  • loop - tento může být nastaven na "loop" a definovat, jestli skladba bude hrát znovu po skončení.
  • preload - tento může být nastaven na "auto" (což popisuje, jestli bude soubor nahrán hned, jak se nahraje stránka), "metadata" (což popisuje jestli pouze metadata, název, atd. budou nahrány), "none" (což nařídí prohlížeči, že souboar nemá být nahrán, po nahrání stránky).
  • src - tento je také zobrazen v příkladu výše a definuje url hudby, která bude přehrána audio tagem.

Nastartujeme to na jedenáct

V posledních krocích, jsme se podívali na nejjednodušší formu HTML5 audia. Když začneme používat audio tag s javascriptem, můžeme začít vytvářet opravdu zajímavé a užitečné audio přehrávače. Podívejme se co pro nás může udělat jQuery. Po definování document ready v jQuery, můžeme vytvořit novou audio proměnnou, která bude držet náš audio soubor, takhle jednoduše:

Je to opravdu takhle jednoduché! Potom kdykoli kdy chceme provést akci na audiu, můžeme ji spustit pomocí proměnné "myaudio". Zde je seznam akcí, které můžeme provést s proměnnou. Poznamenejte si je, později v tutorialu je budeme používat, až vytvoříme náš audio přehrávač..

Pokud chcete aby funkce byla zavolána, jak dohraje audio, můžete použít "myaudio.addEventListener('ended',myfunc)" - toto zavola 'myfunc()' až dohraje audio.


Tvorba HTML5 Audio přehrávače: Značky

Teď když už máte trochu znalostí o HTML5 audiu a rozumíte základním principům, je čas využít tyto znalosti a vytvořit vlastní HTML5 audio přehrávač. Vynechám část s designem, protože to je mimo zaměření tohoto tutorialu, ale můžete si stáhnout accompanying source code a projít si PSD, abyste získali přehled, jak je to spojené dohromady.

Horní část dokumentu je vytvořena HTML5 doctypem. Yahoos CSS Reset, Google web font 'Lobster' pro název. Potom máme poslední jQuery a vlastní javascript file js.js. A konečně máme html5slider.js, který dovoluje Firefoxu zobrazit HTML5 rozsah vstupu, který použijeme pro audio.

Po h1 názvu jsem vytvořil div s třídou "container" a "gradient". Vytvořil jsem samostatnou třídu gradientu, protože bude použita znovu na dalších prvcích. Do ".container" jsem přidal obrázek (který bude obal alba), potom tři anchor tagy, které budou fungovat jako ovládání pro přehrávač. Mezi nimi najdete scrubber/HTML5 pole vstupu.


Tvorba HTML5 Audio přehrávače: Styly

Spíš než procházet každý aspekt CSS, vám dám přehled a poznámku k částem, kterým byste měli věnovat pozornost.

V kódu níže, jsem vytvořil gradient pro přehrávač, který byl vygenerovaný pomocí CSS gradient editoru. Potom jsem vytvořil přehrávač ".container" s nějakými CSS3 přechody.

Také zaznamenáte, že jsem použil CSS3 box atribut nastaven na  "border-box" To dovolí 10px odsazení okolo containaru, být obsažené v šířce, kterou jsem deklaroval, v tomto případě 427px. Kdybych nepoužil tohle, odsazení by se přidalo k 427px, což by udělalo container větší, než chci. Stává se běžnou praxí použít *{box-sizing: border-box;} což je více intuitivní způsob stylování.

Také jsem přidal CSS3 přechody do ".coverlarge" který povolí pěkné přechody, když se poprvé spustí přehrávač. CSS bude možná vypadat trochu složitě, ale mnoho z toho jsou pouze prefixy které zajišťují, že audio přehrávač vypadá a funguje stejně napříč všemi prohlížeči.


Jak by přehrávač měl momentálně vypadat

Jakmile je kontejner pro přehrávač hotov, je čas vytvořit ovládací prvky. Většina tlačítek, byla vytvořena pomocí CSS sprites.

Bohužel IE ještě nepodporuje HTML5 vložení vzdálenosti, takže jsem se rozhodl nezobrazovat audio scrubber IE uživatelům. Pokud jste v pozici, že tohle je neakceptovatelné, můžete použít jQuery UI slider podobným způsobem. Stejně jsem zvolil jednoduše schovat scrubber, proto input{display:none\9!important;} tohle schová vstup řed IE uživateli (podivejte se na tento thread na Stack Overflow, pro další informace o \9).

Problém s HTML5 range sliderem je ten, že pouze par prohlížečů podporuje vlastní stylovaní; hlavně webkitové prohlížeče (Chrome a Safari). Opera a Firefox bude zobrazovat pouze standardní range slider. Pokud potřebujete vlastní styl napříč všemi prohlížeči, potom můžete použít jQuery UI slider, jak jsem zmínil dříve. Vlastní stylovaní pro webkit prohlížeče, můžete vidět zde v atributu input::-webking-slider-thumb.


Tvorba HTML5 Audio přehrávače: jQuery

Po stylovaní a markupu, je čas přivést přehrávač k životu. To můžeme udělat pomocí javascript frameworku jQuery Jakmile bude jQuery document ready deklarován, vytvoříme proměnné, ve kterých můžeme uložit naše jQuery objekty.

V proměnné "song" můžete vidět, že jsme deklarovali dvě skladby. th OGG format pro Firefox a MP3 pro jiné prohlížeče. Potom vytvořím podmíněné IF tvrzení, abychom mohli zkontrolovat, jestli prohlížeč umí přehrát MP3 nebo ne. Pokud umí, potom změníme proměnnou "song" na MP3 skladu - pokud neumí, tak bude hrát 'OGG' formát.

Další věc, kterou vytvoříme jsou klikací funkce, které nám dovolí pustit a vypnout přehrávání hudby. Používám akci play() pro spuštění audia, potom použiji jQuery metodu replaceWith která vlastně zamění tlačítko play za pause.

Také jsem přidal "coverLarge" a "containerLarge" třídy do "container" a "cover". Stejně jako jsem přidal CSS3 přechody do CSS, tohle přidá krasné přechody, když začne hrát audio. Funkce "pause" funguje podobně, ale bez přechodu. Po kliknutí, je zamění tlačítko pause, tlačítkem play.

Tlačítka mute a muted fungují podobně jako play a pause tlačítka, ale volá jiné akce a zaměňuje tlačítka správnými alternativami.

Když uživatel klikne na tlačítko "close" zavoláme jQuery pro odebrání "containerLarge" a "coverLarge" třídy. Tohle schová cover a zavře přehrávač. Potom pauzneme přehrávač, zavoláním pause() akce a resetujeme audio  currentTime na 0. To nastaví skladbu zpět na začátek.

Je čas se posunout na audrio scrubber, který dostal id "seek". První funkce nám dovolí posunout scrubber na jakoukoli část audia. To je provedeno detekováním změny, kdykoli někdo pohne scrubberem. Potom nastavíme song.currentTime na odpovídající část skladby, do které byl scrubber posunut. Take nastavíme max atribut, aby odpovídal délce skladby.

Finální částí jQuery je udělat, aby se "#seek" scrubber pohyboval spolu s trváním audia. Toho docílíme přidáním posluchače událostí a když se čas audia změní, zavoláme funkci. Nastavím proměnnou "curtime" pro získání aktuálního času skladby. Potom změním hodnotu scrubberu, aby odrážel aktuální hodnotu audia.

A je to! HTML5 audio přehrávač, který můžete implementovat na vaši stránku nebo aplikaci.


Shrnutí

Jak jsem zmínil dříve, HTML5 audio je stále v plenkách a má mnoho prostoru pro vylepšení. Momentálně je audio designováno pro přehrání hudby a proto bude vždy streamovat audio ze serveru, což dopadne tak, že některé prohlížeče budou mít potíže s přehráváním. To není vždy problém, ale znamená to, že někdy to začne hrát dřív, než se audio úplně stáhne.

To by potencionálně mohl být problém, pokud chcete použít HTML5 audio, pro věci jako jsou hry nebo aplikace s intenzivním audiem. Z tohoto důvodu, naši přátelé z Google, přišli s metodou, pro vylepšení slabin audio tagu. Google sestavil a připravil žádost pro W3C na "Web Audio API". To se ukazuje být mnohem lepší než nativní HTML5 audio, problémem v této fázi ale je (hadejte?!), že to funguje pouze v Chromu.

Vice o Web Audio API od Googlu si můžete přečíst u Googlu nebo se podívat na specifikace.

Doufám, že jste si užili učení o HTML5 audiu a jak vytvořit vlastní přehrávač. Můj přehrávač obsahuje základní ovládání, ale neexistuje nic co by vás zastavilo, v přidávání dalších funkcí, jako je ovládání hlasitosti nebo přidání vlastních animací. S trochou nápadu a experimentů, můžete opravdu vytvořit skvělé audio přehrávače. Stáhněte si zdrojový kód a já se těším s čím přijdete!

A pokud chcete vidět více možností práce s audio přehrávači a dalšími médii v HTML5, podívejte se na HTML5 Media Items na Envato Marketu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.