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

Testreszabott HTML5 Audio Player létrehozása

by
Difficulty:IntermediateLength:LongLanguages:

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

Ebben a bemutatóban megismertetlek a HTML5 audioval, és megmutatom, hogyan hozd létre a saját lejátszódat.

Ha a rövidebb utat szeretnéd választani, nézd meg az Envato Marketen elérhető, használatra kész HTML5 Audio Playert. Lehetővé teszi lejátszási listák készítését különféle forrásokból, és rengeteg testreszabási lehetőséggel bír.

HTML5 Audio Player with Playlist
HTML5 Audio Player lejátszási listával

Rengeteg HTML5 szakértőt is találhatsz az Envato Studion, akik segíthetnek neked.


Bevezetés

Egészen idáig az audio implementálása egy webes projektbe egy unalmas feladat volt, ami erősen támaszkodott valamilyen harmadik féltől származó bővítményre, például Flashre. Mivel az iPhone hírhedten nem fogad el bővítményeket és mert az a hír járja, hogy az Adobe a továbbiakban nem támogatja a Flasht mobilokra, ezért rengeteg fejlesztő keres más megoldást az audio belevételéhez a projektjeikbe. Ez az a pont, ahol a HTML5 audio közbelép és megoldja a problémát.

Bár a HTML5 biztosít egy szabványos módot audio fájlok lejátszására a weben, az még mindig gyerekcipőben jár és hosszú út áll előtte, amíg minden olyasmit biztosítani tud, mint amit a Flash audiohoz hasonló más bővítmények. Ugyanakkor az esetek többségében ez is bőven elegendő.


Egyszerű HTML5 Audio

A legegyszerűbb módja audio implementálására egy HTML5-öt használó weboldalra az új audio tag használata. Add hozzá a HTML5 dokumentumodhoz a következő kódot:

Ha vetsz egy pillantást a fenti kódba, láthatod, hogy deklaráltam az <audio> taget és meghatároztam a vezérlési tulajdonságokat, így a lejátszó alapértelmezett vezérlőit láthatjuk.

Az <audio>-n belül 2 'src' tagünk van. Az egyik az MP4 számokat, a másik az OGG formátumot határozza meg. Az OGG formátum különösen arra használatos, hogy engedélyezze a zene lejátszását Firefox alatt, mindezt azért, mert licenszelési gondok miatt a Firefox nem támogatja az MP3-at bővítmény használata nélkül. A "Your browser does not support the audio element.", azaz "A böngésződ nem támogatja az audio elemet" string lehetővé teszi a nem támogatott böngészőket használóknak, hogy tudják, mi történik.


Az alapértelmezett HTML5 audio player

HTML5 Audio Tag tulajdonságok

A globális HTML5 tulajdonságok támogatása mellett maga a tag egy sor egyedi tulajdonságot is támogat.

  • autoplay – Ez lehet "true" vagy maradhat üres "", és azt határozza meg, hogy a szám automatikusan elinduljon-e, amint az oldal betöltődött.
  • controls – Ahogy azt a fenti példánál láthattuk, ez határozza meg, hogy az alapvető vezérlők, mint a 'lejátszás, szünet' stb. látszódjanak-e.
  • loop – Az értéke lehet "loop", ilyenkor a szám újrakezdődik miután véget ért.
  • preload – Ez lehet "auto" (ami azt határozza meg, hogy a fájl automatikusan betöltődjön az oldallal együtt), "metadata" (mely esetben csak a metaadatok, a szám címe, stb. töltődjön be) vagy "none" (a böngésző ne töltse be automatikusan a fájlt az oldallal együtt).
  • src – Ezt szintén lehetett a fenti példában látni, ez határozza meg annak a zenének az url-jét, amit le kell játszania az audio tagnek.

Kapcsoljunk csúcsfokozatra

Az előző lépésekben megnéztük a HTML5 audio legegyszerűbb formáját. Amikor az audio taget elkezdjük javascriptelni, akkor igazán érdekes és hasznos audio playereket hozhatunk létre. Vessünk egy pillantást rá, hogy a jQuery mit tehet értünk. Miután már meghatároztuk a document ready-t jQueryben, létrehozhatunk egy új audio változót, hogy az audio fájlunkat a legegyszerűbben kezelhessük:

Ilyen egyszerű! Ezután, ha valamit szeretnénk végrehajtani az audio-n, akkor a 'myaudio' változó használatával végre tudjuk hajtani. Itt a műveletek listája, amit a változóval el tudunk végeztetni. Vedd alaposan szemügyre őket, használni fogjuk a későbbiekben, amikor létrehozzuk a saját audio lejátszónkat...

Ha azt szeretnéd, hogy egy függvény meghívódjon, miután az audio lejátszódott, használhatod a 'myaudio.addEventListener('ended',myfunc)'-ot – Ez meghívja a 'myfunc()'-ot az audio végeztével.


A HTML5 Audio Player létrehozása: Forráskód

Most, hogy már ismerjük egy kicsit a HTML5 audio hátterét és ismerjük az alapelveket, itt az ideje, hogy átültessük a gyakorlatba és egy testreszabott HTML5 audio playert hozzunk létre. Kihagytam a dizájnolási fázist, mivel az kívül esik ennek a bemutatónak a fókuszán, de letöltheted a kapcsolódó forráskódokat és átböngészheted a PSD-t, hogy ötleteket szerezz az összerakásához.

A dokumentum eleje HTML5 doctype-pal készül. A címhez Yahoo CSS Resetet, és a 'Lobster' Google web fontot használjuk. Ezenkívül a legutóbbi jQueryt és egy egyéni JavaScript fájlt (js.js) is beleraktunk. Végül még ott van a html5slider.js, ami lehetővé teszi a Firefox számára, hogy mutassa a HTML5 input range típust, amit az audio tekerésére használunk.

A h1 cím után létrehoztam egy div-et "container" és "gradient" osztállyal. Külön osztályt csináltam a színátmenetnek, mivel újra fogjuk hasznosítani több elemnél is. A ".container"-en belül hozzáadtam egy képet (az lesz az album borító), majd három anchor taget, amit a lejátszó vezérlőiként fognak működni. Közöttük fogod megtalálni a tekerőt/HTML5 range input mezőt.


A HTML5 Audio Player létrehozása: Stílusok

Ahelyett, hogy végigmennénk a CSS minden aspektusán, egy áttekintést fogok adni neked, és kiemelek néhány fontos részt, amire nem árt odafigyelned.

A lenti kódban egy színátmenetet hoztam létre a lejátszónak, amit ezzel a CSS színátmenet szerkesztővel generáltam. Azután létrehoztam a lejátszó ".container" szelektorját néhány CSS3 átmenettel.

Az is észre veheted, hogy a CSS3 doboz átméretezési tulajdonságot használtam a 'border-box' beállításához. Ez lehetővé teszi 10px-es térköz alkalmazását a container körül, ami bele fog számítani az általam meghatározott szélességbe, ami ez esetben 427px. Ha nem ezt használtam volna, a térköz hozzáadódott volna a 427px-hez, amitől a container nagyobb lett volna, mint szerettem volna. Napjainkra hétköznapi dologgá vált a * {box-sizing: border-box;} használata, ami valójában sokkal természetesebb módja a stilizálásnak.

Hozzáadtam néhány CSS3 átmenetet a ".coverlarge"-hoz is, ami lehetővé tesz szép áttűnéseket a lejátszó első megjelenésekor. A CSS először kicsit bonyolultnak tűnhet, de a nagy része böngésző-specifikus előtag, hogy biztosítsuk az audio player egyforma kinézetét a különféle böngészőkön.


Így kellene kinéznie az audio playernek ebben a fázisban

Amint a lejátszó containere elkészült, itt az ideje a tényleges vezérlők kialakításának. A gombok nagy részét CSS sprite-ok használatával hozzuk létre.

Sajnos az IE még nem támogatja a HTML5 range inputot, így úgy döntöttem, hogy az IE használók számára nem jelenítem meg az audio tekerőt. Ha olyan helyzetben vagy, hogy ez nem elfogadható, használhatod a jQuery UI slidert ahhoz módszerhez hasonlóan, mint amit én használtam. De én továbbra is úgy döntöttem, hogy egyszerűen csak elrejtem a tekerőt, így input{display:none\9!important;}. Ez elrejti az input mezőt az ie felhasználók elől (nézd meg a Stack Overflow beszélgetést további információkért a \9 kapcsán)

A HTML5 range csúszkával az a probléma, hogy csak pár böngésző támogatja a testreszabását; főleg a webkit alapú böngészők (Chrome és Safari). Az Opera és Firefox sajnos csak a hagyományos range csúszkát fogja mutatni. Ha egyéni stilizálásra van szükséged mindegyik böngészőhöz, akkor ahogy korábban említettem, használhatod a jQuery UI slidert. Láthatod az egyéni stilizálást a webkit böngészőkre az input::-webkit-slider-thumb tulajdonságnál.


A HTML5 Audio Player létrehozása: jQuery

Amint a stilizálás és a forráskód kész, elérkezett az idő a lejátszó tényleges életre keltésére. Ezt a jQuery javascript keretrendszerrel tudjuk megtenni. Amint a jQuery document ready deklarálva lett, létrehozhatunk néhány változót azon belül, amikbe el tudjuk tárolni a jQuery objektumainkat.

A fenti "song" változóban láthatod, hogy két sávot deklaráltunk. Az OGG formátumot a Firefoxhoz, és az MP3-at a többi böngészőhöz. Ezután létrehoztam egy feltételes IF utasítást, így ellenőrizhetjük, hogy a böngésző le tud-e játszani MP3-akat vagy sem. Ha igen, akkor a "song" változó forrásának az MP3 sávot tesszük meg – ha nem, akkor az 'OGG' formátumot fogja lejátszani.

A következő dolgok, amit létre fogunk hozni, a kattintás funkciók, amik lehetővé teszik számunkra a zene elindítását és szüneteltetését. Az audio play() utasítását használom az audio indítására, aztán a jQuery replaceWith eljárását, ami alapjában véve lecseréli a play gombot a pause gombra.

Ezen kívül hozzáadtam a "coverLarge" és a "containerLarge" osztályokat a "container"-hez és a "cover"-hez. Mivel korábban már hozzáadtam ezekhez a CSS3 áttűnéseket a CSS-hez, ez szép áttűnést fog eredményezni, amikor az audio elkezdi a lejátszást. A "pause" függvény hasonlóképp működik, de az áttűnés nélkül. Amikor rákattintunk, lecseréli a pause gombot a "play" gombra.

A mute és muted gombok a play és pause gombhoz hasonlóan működnek, de a kapcsolódó műveleteket hívja meg és lecseréli a gombokat a neki megfelelőekre.

Amikor a felhasználó a "close" gombra kattint, meghívjuk a jQueryt, hogy eltávolítsa a "containerLarge" és "coverLarge" osztályokat. Ez el fogja rejteni a borítót és visszazárja a lejátszót. Ezután szüneteltetjük a lejátszást a pause() művelettel és reseteljük az audio currentTime-ot 0-ra. Ez segít a számot az elejéről kezdeni.

Itt az idő, hogy áttérjünk az audio tekerőre, ami egy "seek" azonosítót kapott. Az első függvény teszi lehetővé számunkra, hogy a tekerőt az audio bármelyik részére mozgassuk. Ez észleli a változtatást, amikor valaki elmozgatja a tekerőt. Ezután a song.currentTime-ot beállítjuk a zene megfelelő részére, a tekerőnek megfelelően. A max értéket is úgy állítjuk be, hogy a szám hosszának feleljen meg.

A jQuery végső része a "#seek" tekerőt együtt mozgatja az audio hosszával. Mindezt egy event listener hozzáadásával végezzük el, és amikor az audio ideje frissül, meghívjuk a függvényt. Beállítottam egy "curtime" változót az aktuális zeneidő megállapítására. Ezután frissítettem a tekerő értékét az audio aktuális időhelyzetének megfelelően.

És meg is vagyunk! Kész a HTML5 audio player, amit implementálhatsz a saját oldaladra vagy alkalmazásodba.


Konklúzió

Ahogy korábban már említettem, a HTML5 audio még gyerekcipőben jár, és még sok rajta a fejlesztenivaló. Jelenleg az audio arra lett tervezve, hogy zenét játsszon le, és így mindig streameli az audiot a szerverről, ami azt eredményezi, hogy néhány böngészőn problémába ütközik a lejátszás. Ez nem jelent állandó problémát, de néha már azelőtt elkezdi lejátszani az audiot, hogy teljesen letöltődött volna.

Ez egy gyakran előforduló hiba, amikor a HTML5 audiot olyan dolgokra szeretnéd használni, mint hangeffektek egy játékban, vagy intenzív audio alkalmazások. Ez okból kifolyólag a barátaink a Google-nél előálltak egy módszerrel, amivel javíthatnak az audio tag gyengeségein. A Google készített és beküldött egy ajánlást a W3C-nek a "Web Audio API"-ról. Ez bizonyítja, hogy lehetünk jóval funkciógazdagabbak, mint a natív HTML5 audio, de ugyanakkor a probléma az ebben a fázisban (kitalálod?!), hogy jelenleg csak Chrome alatt működik.

Többet is olvashatsz a Google Web Audio APIjáról és további példákat is láthatsz a Google code-on, vagy megnézheted a web audio specifikációt.

Remélem, élvezted a HTML5 audio tanulását és a saját lejátszók elkészítését. Az én lejátszómban benne vannak az alap vezérlők, de semmi sem gátol meg téged abban, hogy további funkciókat adj hozzá, például hangerőszabályzót, vagy akár egyéni animációkat. Egy kis gondolkodással és kísérletezgetéssel tényleg nagyszerű audio lejátszókat hozhatsz létre. Töltsd le a forráskódot, én már alig várom, hogy láthassam, mivel állsz elő!

És ha szeretnél további lehetőségeket megnézni az audio playerekhez és más médiákhoz HTML5-ben, nézd meg a HTML5 Media elemeket az Envato Marketen.

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.