Rádió lejátszó HTML5 - hang, w3 oktatás

Eljövetele előtt HTML5 rendkívül kényelmetlen, hogy adjunk hangot a weboldalakat. Évek óta, a Flash volt az egyetlen módja, hogy beágyazza audio tartalmak -, de a bevezetése a tag

Ebben a cikkben megnézzük a tag

Basic audio tag szintaxis

elem

A böngésző létrehoz egy egyszerű lejátszó egy weboldalon. Az alábbiakban egy tagja

elem

src tartalmazza az elérési utat a hangfájlt szeretne játszani. Src attribútum továbbá szubsztituálva lehetnek egy vagy több tag az elem belsejében audio:

Ez lehetővé teszi, hogy több elemet . megadásához több audio formátumot. Ahogy teszi a különböző böngészők támogatják a különböző formátumokat, így ideális esetben meg kell adnia több formátumban, hogy a játékos a munka minden böngészőben. Például:

robotpilota - attribútum lehetővé teszi az audió automatikusan, amint az oldal betöltésekor.

Megjegyzés: Ne feledje, hogy az automatikus futtatási bosszant sok felhasználó. Ha használja az automatikus futtatás funkciót, így a felhasználó számára lehetővé, hogy szüneteltesse a lejátszást.

autobuffer - olyan tulajdonság, amely lehetővé teszi, hogy automatikusan töltse le audio stream után azonnal az oldal betöltésekor nélkül automatikus lejátszás. Ez az attribútum csak akkor érvényes, ha nincs automatikus lejátszás attribútumot.

loop - egy attribútum segítségével játszani egy párszor vége után a játék.

Azt is megváltoztathatja az src attribútum:

Rátérve a audio.play () metódus és audio.pause (), akkor lehet kezdeni, vagy szüneteltetheti a lejátszást a fájlt. Audio.volume paraméter határozza meg a hangerőt, és az eseménykezelő timeupdate fut minden alkalommal, amikor a lejátszás frissül. Ezek az egyszerű technikákat elég lesz, hogy hozzon létre egy rádió lejátszó.

Nézzük meg ezeket a funkciókat működés közben! A következő script létrehoz egy elemet

A fenti szkript alkalmazzák ezt a HTML-kód:

Ha szeretne többet megtudni arról Audio API, azt javaslom, hogy megismerjék a cikket Simon Peters „mindent meg kell tudni HTML5 video és audio”.

Codec támogatás böngészők

Támogatására több böngészővel, meg kell adnunk az azonos hangsávot több formátumban. Mint korábban említettük, megadhat különböző formátumokban címkék használatával . elhelyezni az elem belsejében

A kompatibilitás a régi böngészők nem támogatják elem

Streaming elem

Mi történt a játékos az audio tag. játszhat audio fájlokat különböző böngészőkben. Most azonban szembesülnek a kérdés - hogyan kell kezelni a streaming audio adatokat az elem

Készítsen HTML5-lejátszó

Fogjuk használni az audió folyam által a norvég NRK rádió. NRK biztosít minden rádióállomás két formátumban: Ogg és MP3, úgyhogy van két forrásból audio streaming.

Az adatok létrehozásához játékos

Beállítása szerkezete és kialakítása a játékos

A következő lépés az, hogy megteremtse a HTML struktúra A lejátszó és ellenőrzés:

minden elem és

Megvan a saját azonosítója id. így könnyebben tudunk ezekre az elemekre és hozzá eseménykezelőkkel, hogy ellenőrizzék a játékos az Audio API-t.

Minden gomb keretezi a CSS:

Azt is meg kell jegyezni, hogy kértük az osztály .radio alapértelmezett az elem

. amely tartalmazza az összes játékos. Most már tudjuk használni, hogy könnyen meghatározni CSS stílusokat:

Az a képesség, hogy telepíteni több osztályt egyetlen elem a HTML, mi is létrehozhatunk játékos stílusok (bőr) és válthat közöttük, csak a változó egyik osztály:

Fogja kényszeríteni a játékos dolgozni

Az utolsó lépés a használatát jPlayer bővítmény - hozza létre a szükséges funkciókat. Először meg kell csatlakozni HTML szkriptek jQuery könyvtár és jPlayer bővítmény, valamint saját kódfájlhoz beállítani a játékos (player.js), hozzátéve, a következő kódot:

Először hozzon létre egy változó objektumot jQuery, amelyben az elem keletkezik

Ezután megkapjuk adatokat a szükséges audio stream JSON formátumban AJAX:

Ha AJAX-lekérdezés visszatér az adatokat a szerverre, el kell kerülni az összes csatornát kapott a hurok, és add meg a kiválasztási listában a játékos csatornákat. Csatorna kiválasztása lista - a mi esetünkben ez csak egy lista a képeket mindegyik csatorna logóját és onclick eseménykezelő minden kép megváltoztatásához az audio stream a játékos, amely lehetővé teszi a felhasználó számára, hogy válasszon a rendelkezésre álló csatornákat.

A funkció kapcsolódik egy onclick esemény minden kép a csatorna kiválasztási lista tartalmazza a módszer hívás törli az aktuális fájl lejátszása és a módszer kiválasztásának új áramlási elem

Plug jPlayer vigyázni a régi patak tisztítása, szerelése új elem

A fenti kód hozzáadja jPlayer rendelkező elem ID #player. A plug-in hívásbeállítás elindultunk elem

A kész funkció felállítottunk egy rádiócsatorna alapértelmezés szerint.

Végül rámutatunk a plugin jPlayer azonosítók különböző gombok és létrehozta az eseménykezelő, amikor játszik audio, hogy változik az idő a mi játék a játékos.

következtetés

Ebben a cikkben megpróbáltuk vizsgálni részletesen a HTML5 elem