Egy időben az egyetlen módja volt a hang lejátszására a webhelyen, hogy Flash-et használjon. Az életünk megjelenésével HTML5. minden sokkal egyszerűbb volt, mert volt egy új címke
amellyel lejátszhatja és kezelheti a hangot a webhelyén.Ebben a cikkben szeretném bemutatni ezt a címkét.
Címke hozzáadása oldalanként
Az audio hozzáadásának egyik példája az alábbi. Figyeld meg a két attribútumot, amelyeket jelöltem. Az első az src attribútum, amelyben az audiofájl elérési útja meg van adva, a második pedig az automatikus lejátszás, amellyel megmondjuk a böngészőnek, hogy ezt a hangfelvételt automatikusan, közvetlenül az oldal betöltése után kell lejátszani. Ha nem adjuk meg az autoplay attribútumot egyáltalán. akkor a felvétel nem lesz lejátszva, amíg nem kattintunk a Lejátszás gombra.
Hang lejátszása egy hurokban
Ha azt szeretné, hogy az audiofelvétel ciklikusan ismétlődjön, pl. a felvétel befejezése után ismét lejátszásra került, akkor ebben az esetben adja meg a hurok attribútumot.
Ha nem ad meg hurok attribútumot. akkor a felvétel egyszer el fog veszni és leáll.
A hangvezérlő panel megjelenítése
A fenti példát az automatikus lejátszási attribútum használatával tekintettük meg. Ebben az esetben a felvétel automatikusan elkezdi lejátszani anélkül, hogy képes lenne irányítani (azaz a felhasználó nem tudja szüneteltetni stb.).
Ha szeretné, hogy webhelyén megjelenjen egy bizonyos audió lejátszó, amellyel a felhasználó rákattinthat a lejátszás gombra, vagy kattintson a szünet gombra, és módosítsa a felvétel hangerejét, ebben az esetben adja meg a vezérlő attribútumot.
Ennek eredményeképpen egy audio vezérlőpanel jelenik meg a webhely oldalon, amely példa az alábbi képen látható:
Milyen audioformátumokat kell használni?
címke támogatja a modern böngészők többségét, de az egyetlen hátránya, hogy a különböző böngészők támogatják a hangfelvételek más formátumát. A Chrome például MP3 formátumú hangokat játszik le. és a Firefox nem játssza le ezt a formátumot, hanem OGG formátumú hangokat használ.
A probléma megoldása, hogy mindkét formátumban hangfelvételeket használjon (lásd az alábbi példát).
Mostantól minden modern böngésző képes lejátszani ezt a rekordot.
Cross-böngésző címke
Ahogy fent írtam, a címke támogatja az összes modern böngészőt, nevezetesen: Chrome. Firefox. Opera. Safari. Yandex böngésző. InternetExplorer 9+.
Természetesen vannak olyan elavult böngészők is, amelyek nem támogatják a címkét és amelyet az internethasználók bizonyos százaléka használ. Ezekhez a böngészőkhöz a következőket írhatja:
Mindennek van mindennek. Remélem, megérted ezt a címkét.
