Hogyan lehet hangot beszúrni egy html oldalra. Hogyan lehet hangot beilleszteni egy HTML dokumentumba? Háttérzene beállítása html-ben

Ez a kérdés nagyon gyakran felmerül, ezért úgy döntöttem, hogy külön cikket szentelek neki az órákon. Mivel a HTML nem rendelkezik egy univerzális technológiával az összes böngészőhöz való hanglejátszáshoz, a probléma megoldásához azt javaslom, hogy töltse le az audiolejátszó fájlját, ahogy azt a legtöbb webhelyen teszik. Mindent lépésről lépésre csinálunk:

1. Azon a tárhelyen, ahol a webhelye található, a gyökérkönyvtárban (az indexfájlt tartalmazó mappában) hozza létre az audio mappát. A jövőben minden hangfájlt elhelyezhet benne.

3. Most válassza ki a szükséges fájlokat, lehetőleg mp3 formátumban. Hozzon létre egy hangmappát a webhely gyökerében, és töltse fel azokat.

4. Már csak a lejátszó csatlakozási kódját kell beírni. Bármely webhelyhez megfelelő, csak a megfelelő helyen kell megadnia a lejátszófájl és az audiofájl elérési útját, lecserélve a your_domain és az audio_file nevet:

És minden készen áll! Megnézheti a működő példát is.

Háttérzene telepítése html-be A HTML és a böngésző lehetőségeit kihasználva háttérzenét is beszúrhatunk az oldalba. Szüksége lesz egy hangfájlra a kívánt formátumban: WAV, AU, MIDI vagy MP3. Példaként használhat bármilyen fájlt a megadott kiterjesztéssel.

Az első módszer a beágyazási címke. Az embed elem olyan objektumok (például videofájlok, flash-filmek, egyes hangfájlok stb.) betöltésére és megjelenítésére szolgál, amelyeket a böngésző kezdetben nem ért meg.

A szintaxis nagyon egyszerű:

Zárócímke nem szükséges.

Most nézzünk meg egy példát egy rekordra attribútumokkal, alább pedig azok dekódolásával:

Címkeattribútumok beágyazása a hang html formátumban történő lejátszásához
szélesség - panel szélessége képpontokban (vagy százalékban)
magasság – a panel magassága képpontokban (vagy százalékban)
igazítás - a panel helyzete a szöveghez képest, a lehetséges értékek balra, jobbra, középre
rejtett - lehetővé teszi a panel elrejtését, attribútumértékek: igaz - a panel rejtett, false - a panel látható (alapértelmezett érték)
autostart - igaz - a lejátszó automatikusan elindul az oldal betöltésekor, false - várja a lejátszás gomb megnyomását
loop - hurok, igaz - a számot körben játsszák, és ha false - csak egyszer

Második út. Nagyon régi, de praktikus is) Adja hozzá a dallamot ugyanabba a mappába (könyvtárba), ahol a fájl található, és a törzsbe írja be a következő kódot:

Ennek eredményeként az oldal betöltése után a bgsound címkében megadott dallam szólal meg. Most pedig nézzük meg jobban a címke attribútumait:

src - az audiofájl elérési útja
hurok - hányszor ismételje meg a dallamot (ha -1, akkor a végtelenségig ismétlődik)
egyensúly - sztereó egyensúly értéke (-10000 és 10000 között)
hangerő - a dallam lejátszásának hangereje, ahol 0 a maximum, és -10000 a minimum.

A lejátszót azonban semmilyen módon nem lehet majd irányítani – minden alkalommal, amikor az oldal frissül, a szám újra lejátszható.

A háttérzene beillesztési módjának ismertetése után szeretném lebeszélni erről, mivel a legtöbb felhasználó általában már zenét hallgat, amikor különböző webhelyeket látogat meg. Ezért a kísérőzene csak arra kényszerítheti, hogy bezárja a lapot az oldallal.

Hang és zene beillesztése HTML5-be - hangcímke
audio – egy párosított címke, amely meghatározza a háttérhangot, zenét vagy más hangfolyamot a webhelyen.

Hangcímke attribútumok

automatikus lejátszás - a fájl azonnal lejátszásra kerül az oldal betöltésekor (hasonlóan a bgsound háttérzenéhez)
vezérlők – a lejátszó vezérlőpultjának megjelenítése a böngészőben
loop – a fájl ismételt lejátszása a befejezés után
előtöltés - az audiofájl az oldal betöltésével együtt betöltődik
src - az audiofájl elérési útja (mp3 vagy ogg)

Példa kód hangcímkével

Hangcímke

Hang a HTML 5-ben

Az audio címkét a böngésző nem támogatja.
Zene letöltés.

Címkék, attribútumok és értékek

• - meghatározza a háttérben található HTML hangot és zenét az oldalon. szektorban található.
• - meghatározza a hangfájl url-jét Wav vagy Mp3 formátumban.
• loop="" - meghatározza a lejátszások számát.
• volume="-1000" - a hangerő beállítása. Ebben az esetben a jelzett értéket a rendszer levonja a felhasználó számítógépén beállított aktuális hangerőszintből.
• balance="0" – a hangegyensúly beállítása.

Figyelem! A fentiekben ismertetett módszer a háttérhangok HTML-oldalakba történő bevezetésére csak az Internet Explorer és az Opera böngészők korai kiadásaihoz alkalmas. Nem alkalmas modern böngészőkhöz ⇒ az oldalon található zene és hang nem szólal meg! Ezért nézze meg alább, ahol részletesen tárgyaljuk a hang és zene weboldalba való beillesztésének böngészők közötti módszerét minden böngésző (Opera, Firefox, Internet Explorer, Chrome) esetén.

Hang HTML-ben vagy zene az oldalon minden böngészőhöz

HTML háttérhangzás Opera, Firefox, Internet Explorer, Chrome számára:

A kód a szektorban található.

Tulajdonságok és értékek

• autostart="" - meghatározza, hogy a zene automatikusan elindul-e egy internetes oldal megnyitásakor vagy sem. Lehetséges értékek: igaz - igen vagy hamis - nem.
• loop="" - meghatározza, hogy a lejátszások megismétlődnek-e. Lehetséges értékek: igaz - igen vagy hamis - nem.
• Hidd="" - meghatározza, hogy a játékos vezérlőpultja el van-e rejtve vagy sem. Lehetséges értékek: igaz - igen vagy hamis - nem. Ha nem, akkor a panel méretei: width="" height="" .

A tanács önmagát sugallja! Csak akkor használjon háttér HTML hangot vagy zenét webhelyén, ha az valóban indokolt!

A HTML5 audio továbbfejlesztett lehetőségeket biztosít a hangtartalommal való munkavégzéshez. Egészen a közelmúltig az egyetlen módja annak, hogy hangfájlokat adjunk hozzá a weboldalakhoz, a háttérhang integrálása volt egy olyan címke használatával, amely lejátszható volt, miközben a felhasználó böngészi az oldalt, és nincs lehetőség kikapcsolni.

A HTML5 specifikáció egy új elemének köszönhetően immár beépített programozói felülettel is beépíthető audiotartalom, plug-inek nélkül.

Hogyan adjunk hozzá HTML5 hangot egy weboldalhoz 1. Elemböngésző támogatás

IE: 9.0
Firefox: 3.5 alap támogatás, 15.0 teljes támogatás
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: -
Android böngésző: 4.1
Chrome Androidra: 44

A HTML5 elemet hangtartalom weboldalakba ágyazására használják. Általában a HTML jelölés így néz ki:

A controls attribútum böngészőket ad hozzá az audiolejátszó vezérlőfelületének megjelenítéséhez - lejátszás, szünet, hangerőgombok.

Rizs. 1. Az audiolejátszó megjelenése különböző böngészőkben

Jelenleg nincs olyan hangformátum, amely minden böngészőben működne, ezért annak biztosítása érdekében, hogy a tartalom a lehető legszélesebb közönség számára elérhető legyen, javasoljuk, hogy több hangforrást adjon meg az elem src attribútuma használatával. Ugyanakkor tartalék tartalmat is hozzáadhat az elemet nem támogató böngészőkhöz.

Letöltés név.mp3

1. táblázat Címke attribútumok Tulajdonság

automatikus lejátszás	Hangfájl automatikus lejátszása közvetlenül az oldal betöltése után.
vezérlők	Megkéri a böngészőt, hogy jelenítse meg az alapvető lejátszási vezérlőket (lejátszás indítása és leállítása, ugrás a felvétel másik helyére, hangerő beállítása).
hurok	Hangfájl ismételt lejátszása.
tompított	Hangfájl lejátszása közben kikapcsolja a hangot.
előtöltés	A hangtartalom előtöltéséért felelős attribútum. Nem kötelező, egyes böngészők figyelmen kívül hagyják. Lehetséges értékek: auto - A böngésző letölti a teljes hangfájlt, hogy az elérhető legyen, amikor a felhasználó elkezdi játszani. metaadatok – A böngésző letölti a hangfájl első kis részét, hogy meghatározza annak alapvető jellemzőit. nincs – nincs automatikus letöltés az audiofájlhoz.
src	A hangfájl abszolút vagy relatív URL-jét tartalmazza.

2. Audiokodekek

Az audiokodek (dekóder) egy olyan program, amely digitális adatokat konvertál audiofájlba vagy hangfolyam formátumba. A népszerű hangformátumok a következők:

Az MP3 a legnépszerűbb hangformátum, amely veszteséges tömörítést használ, és lehetővé teszi a fájl méretének többszöri csökkentését. A licencdíjak miatt a Firefox és az Opera nem támogatott.

A.A.C. (Speciális audiokodek)- zárt kodek, hasonló az MP3-hoz, de az utóbbihoz képest hasonló fájlméret mellett magasabb hangminőséget támogat.

Az Ogg Vorbis egy ingyenes és nyílt forráskódú formátum, amelyet Firefox, Opera és Chrome támogat. Jó hangminőséget biztosít, de a hardveres lejátszók nem támogatják széles körben.

3. Alternatív médiaforrások

Az elem több médiaerőforrás hozzáadására szolgál a és számára. Alternatív video-/audiofájlokat jelöl, amelyek közül a böngésző választhat a támogatott médiatípus vagy kodek alapján.

4. Feliratok és címek hozzáadása

Az elem gyermekelemként és . Szövegsávot ad hozzá a feliratokhoz, médiacímekhez vagy egyéb szöveges információkhoz, amelyeknek láthatónak kell lenniük egy hang- vagy videofájl lejátszása közben.

3. táblázat Címke attribútumok Attribútum Leírás, elfogadott érték

alapértelmezett	Azt jelzi, hogy ezt a számot alapértelmezés szerint játssza le. Egy adott attribútumot csak egy elem tartalmazhat.
kedves	Meghatározza, hogy a feliratok alapértelmezés szerint milyen típusúak legyenek. Elfogadott értékek: feliratok – párbeszédek és hangeffektusok fordítása, szövegként megjelenítve a videó felett (siketek számára). fejezetek – fejezetcímeket ad hozzá listaként a médiafájlban való navigáláshoz. leírások – hangos leírást ad a videóban zajló eseményekről (vak felhasználók számára). metaadatok – a szkriptek által használt metaadatok nem jelennek meg a felhasználók számára. feliratok – a videó hangsávjának szövegmásolata, amely a videó felirataként jelenik meg.
címke	Számcímet ad hozzá. Ha ez az attribútum nincs beállítva, a böngésző az alapértelmezett értéket alkalmazza.
src	A szövegsáv adatok abszolút vagy relatív URL-jét tartalmazza.
srclang	A lejátszott szám nyelve.

5. Hanglejátszó stilizált példája

A CSS stílusok használatával szokatlan megjelenést kölcsönözhet audiolejátszójának. A lejátszást egy kis szkript vezérli (a jQuery könyvtár használatával), a hang akkor jelenik meg, amikor az egérmutatót a rekord fölé viszi.

Hangklip weblapba történő beillesztéséhez a HTML 5 párosított címkét biztosít. A hangfelvételt tartalmazó fájl internetcímét a címke SRC attribútuma jelzi:

Amikor egy webböngésző találkozik egy címkével, azonnal letöltheti és lejátszhatja a hangfájlt, letöltheti lejátszás nélkül, vagy nem csinál semmit. (Utóbbi esetben webszkriptből indíthatjuk a lejátszást; a webszkriptekről a III. részben lesz szó.) Olyan vezérlőket is biztosíthat a weboldalon, amelyek lehetővé teszik a látogató számára egy hang lejátszását, szüneteltetését vagy gyors előre- vagy visszatekerését fájlt, és beállítja a hangerőt. Ez mind testreszabható különböző címkeattribútumok segítségével, amelyeket hamarosan megvizsgálunk.

A címke egy blokk elemet hoz létre a weboldalon. Így nem fogunk tudni beilleszteni egy hangfelvételt egy weboldalba egy bekezdés részeként. De ahhoz, hogy külön bekezdésbe helyezzük, nem kell további műveleteket végrehajtanunk (ellentétben egy képpel).

Alapértelmezés szerint a webböngésző nem játssza le a hangfelvételt. Ehhez meg kell adnia a speciális AUTOPLAY attribútumot a címkében. Ez egy igazán különleges attribútum: nincs jelentése - a címkében való puszta jelenléte elegendő ahhoz, hogy érvényesüljön (tag attribútum jelentés nélkül):

Most hallani fogod a hangot!

Alapértelmezés szerint a hangfelvétel semmilyen módon nem jelenik meg a weboldalon (ami azonban érthető - a hanganyagot nem nézni, hanem hallgatni kell). De ha egy attribútumot ad meg a címkében a CONTROLS érték nélkül, a webböngésző a hanglejátszás vezérlőit jeleníti meg a weboldal azon a részén, ahol a címke el van helyezve. Ezek közé tartozik a lejátszás/szünet gomb, a lejátszási sáv és a hangerőszabályzó:

Nyomja meg a lejátszás gombot a hang meghallgatásához.

Az AUTOBUFFER érték nélküli attribútumot csak akkor van értelme a címkében feltüntetni, ha ott nincs AUTOPLAY attribútum. Ha meg van adva, a webböngésző a weboldal betöltése után azonnal megkezdi az audiofájl letöltését – ez kiküszöböli a fájl lejátszásának késleltetését.

Az elsajátított ismeretek gyakorlatban történő teszteléséhez szükségünk lesz egy, a webböngésző által támogatott formátumú hangfelvételre. A szerző talált egy kis hangfelvételt WAV-PCM formátumban, és a sound.wav nevet adta neki. Bármilyen más hangfelvételt használhat, de természetesen meg kell adnia a fájl nevét a 4.2-es listában található HTML kódban.

. Hozzuk létre ezt a címkét leíró weboldalt, amelynek HTML kódja a 4.2-es listában látható.

Mentsük el a weboldalt egy t_audio.htm nevű fájlba. Helyezzük el a kiválasztott hangfájlt (a szerzőtől - sound.wav) abba a mappába, ahol webhelyünk összes fájlja található (beleértve a t_audio.htm fájlt is). És azonnal nyissa meg az újonnan létrehozott weboldalt egy webböngészőben (4.2. ábra).

Látni fogjuk a példakódot és lentebb a végrehajtásának eredményét - szép elemek egy hangklip lejátszásának vezérléséhez. Megnyomhatjuk a lejátszást és meghallgathatjuk.

Videó beszúrása

A párosított címke segítségével videót illeszthet be egy weboldalra. A videofájl internetcímét a címke ismerős SRC attribútuma jelzi:

Ha találkozott ezzel a címkével, a webböngésző egy videotartalom-megtekintési panelt jelenít meg a weboldal azon a helyen, ahol elhelyezték. A címkében megadott attribútumoktól függően előfordulhat, hogy azonnal letölti és lejátszhatja a hangfájlt, csak letöltheti lejátszás nélkül, vagy nem csinál semmit. A videolejátszás vezérlőit is megjelenítheti egy weboldalon.

A címkéhez hasonlóan a címke is blokk elemet hoz létre a weboldalon, és támogatja az AUTOPLAY, CONTROLS és AUTOBUFFER attribútumokat:

Ha a videó lejátszása még nem indult el, az előnézeti panelen a videó első képkockája jelenik meg, vagy egyáltalán nem jelenik meg (a pontos viselkedés a webböngészőtől függ). De megadhatunk egy grafikus képet, ami ott jelenik meg splash képernyőként. Ez a címke POSTER attribútumának használatával történik; értéke a kívánt grafikus fájl internetcímét jelzi:

Itt megadtunk egy splash képet a videóhoz, amely a lejátszás megkezdése előtt megjelenik a megtekintő panelen, és a filmposter.jpg fájlban tárolódik.

No, gyakoroljunk? Először is keressünk egy megfelelő formátumú videofájlt. A szerző talált egy kis videót OGG formátumban, és a film.ogg nevet adta neki. Bármilyen más videót választhat, de természetesen meg kell adnia a fájl nevét az alábbi HTML kódban.

MEGJEGYZÉSRE

Ha nem talál megfelelő formátumú videót, saját maga is létrehozhat egyet egy másik formátumba mentett videó átkódolásával. Erre alkalmas a SUPER © segédprogram, amely a http://www.erightsoft.com/SUPER.html internetcímen található. Számos multimédiás formátumot támogat, beleértve az OGG-t is.

Nyissuk meg az index.htm weboldalt, és írjuk be a címkét a címkék részbe. Hozzunk létre egy weboldalt, amely leírja ezt a címkét, amelynek HTML kódja a 4.3-as listában látható.

Mentsük el a weboldalt egy t_video.htm nevű fájlba. Helyezzük el a kiválasztott videofájlt (a szerzőtől - film.ogg) abba a mappába, ahol webhelyünk összes fájlja található (beleértve a t_video.htm fájlt is). És nyissa meg az elkészült t_video.htm weboldalt egy webböngészőben (4.3. ábra).

A példakód alatt látni fogjuk a végrehajtás eredményét - a nézetpanelt és a lejátszás vezérlésére szolgáló elemeket. Nyomjuk meg a lejátszás gombot és nézzük meg a "filmet". Ne feledje, hogy a lejátszás megkezdése után a kezelőszervek eltűnnek; Eléréséhez vigye az egérmutatót a nézetpanel fölé. A videó lejátszása után ezek a vezérlők ismét megjelennek a képernyőn.

További címke funkciók és

De várj! Korábban megtudtuk, hogy a támogatott multimédiás formátumok készlete a webböngészőnként eltérő. És megtörténhet, hogy a weboldalon elhelyezett hang vagy videó túl kemény lesz néhány webböngésző számára. Mit kellene tennem?

Különösen ilyen esetekben a HTML 5 lehetővé teszi több multimédiás fájl jelölését egy címkében vagy egyszerre. A webböngésző maga választja ki a támogatott formátumot.

Ha több médiafájlt szeretnénk felsorolni egy címkében, két dolgot kell tennünk.

1. Távolítsa el a címkéből vagy a multimédiás fájlra mutató hivatkozást, azaz az SRC attribútumot és annak értékét.

2. Helyezze el egy címkébe vagy címkekészletbe, amelyek mindegyike meghatározza egy-egy multimédiás fájl internetcímét.

Egyetlen címke határozza meg a médiafájl internetcímét és MIME-típusát is. A címke SRC és TYPE attribútumai erre szolgálnak:

Ez a címke két videófájlt azonosít, amelyek ugyanazt a filmet tárolják: az egyik OGG, a másik QuickTime formátumban. Az OGG formátumot támogató webböngésző letölti és lejátssza az első fájlt, a QuickTime-ot támogató webböngésző pedig betölti és lejátssza a második fájlt.

Vegye figyelembe, hogy a videofájl MIME típusa (és ennek megfelelően a címke TYPE attribútuma) elhagyható. Ekkor azonban a webböngészőnek be kell töltenie a fájl elejét, hogy megnézze, támogatja-e a fájlformátumot. Ez pedig extra és teljesen felesleges terhelés a hálózaton. Ezért jobb, ha mindig megadjuk a MIME típusát.

Mi van, ha a webböngésző egyáltalán nem támogatja a címkéket? Ebben az esetben figyelmen kívül hagyja őket, és nem jelenít meg semmit a weboldalon. Azonban tudunk pótszöveget adni, amely leírja a felmerült problémát, és javaslatot tesz annak megoldására (például a webböngésző megváltoztatására). Ez a csereszöveg egy címkén belül vagy az összes címke után (ha van) elhelyezve, például a 4.4-es listában.

Vegye figyelembe, hogy nem adtuk meg a bekezdést létrehozó címkéket a helyettesítő szövegben. A címkék önmagukban is blokk elemek, így erre nincs szükség.

Ez minden az internetes médiáról és az azt támogató HTML 5 eszközökről szól.

Leírás

Hozzáadja, lejátssza és kezeli a hangbeállításokat egy weboldalon. A fájl elérési útját az src attribútum vagy egy alcímke adja meg. A tárolóba olyan szöveget írhat, amely olyan böngészőkben jelenik meg, amelyek nem működnek ezzel a címkével.

A böngészők által támogatott kodekek listája korlátozott, és a táblázatban található. 1.

asztal 1. Kodekek és böngészők

Codec	internet böngésző	Króm	Opera	Szafari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

A meghatározott böngészőkben való univerzális lejátszáshoz a hang különböző kodekekkel van kódolva, és a fájlok egyszerre kerülnek hozzáadásra a címkén keresztül.

Szintaxis attribútumok A hang az oldal betöltése után azonnal elkezdődik. Vezérlőpult hozzáadása hangfájlhoz. Megismétli a hangot az elejétől a befejezés után. Fájl letöltésére és weboldal betöltésére szolgál. Megadja a lejátszott fájl elérési útját. Záró címke

Kívánt.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

hang-

Alekszandr Klimenkov – Tizennégy

Az audio címkét a böngésző nem támogatja. Zene letöltés.

A példa eredményét az Opera böngészőben az ábra mutatja. 1.

Rizs. 1. Hangfájl lejátszása

Böngészők

A hanglejátszási vezérlők megjelenése böngészőnként eltérő, de az alapelemek ugyanazok. Ezek a lejátszás/szünet gomb, a szám hossza, az eltelt és a teljes lejátszási idő, valamint a hangerő szintje.