Hogyan kell beilleszteni egy hangfájlt HTML-be. Audio mentése az internetről a fájlokba

Miért van szüksége zenére a webhelyen?

Egy meglehetősen érdekes kérdés, zeneszám vagy hangfájlok lejátszása a helyszínen, vagy a beépített játékos segít a webhely látogatóinak pihenéséhez, pozitív érzelmeket okoz, és a kívánt módon állítja be a kívánt módon, hogy megkönnyítse a webhely kölcsönhatását. De ezek a hatások csak akkor működnek, ha a helyszínen lévő zenét helyesen választják ki, és a hangtérfogat nem haladja meg a megengedett határértékeket, különben minden erőfeszítései hiábavalóak lesznek, és negatív érzelmeket okoznak a helyszíni látogatóktól.

Hogyan kell beilleszteni audio (zenét) a webhelyre a HTML-ben?

Gyakran kérdezzünk egy ilyen kérdést, a helyszínen lévő zene releváns és kreatív elem, és sokféle módon reprodukálhatjuk, és nem olyan nehéz megvalósítani. Kezdjük azzal, hogy a globális hálózat minden felhasználója bármilyen böngészőt használ az internet eléréséhez, és nincs általános és univerzális technológia a hang- és zenefájlok lejátszásához, minden böngésző saját algoritmusaiban működik, és kissé eltérnek egymástól , Tehát amikor zenét játszanak a bevezetés segítségével a HTML oldalkódban. De ahogy tudod, minden probléma megoldódott!

Zene beillesztése HTML, JavaScript, JQuery, Ajax Methods:

1 út.

Zenelejátszó hang létrehozása a weboldalon vagy a játékoson

A technológia egyszerű, a játékos fájl jön létre úgy, hogy nem tölti be az oldalt, vagy szerver válassza ki a technológiát, hogy fel fogjuk használni: JavaScript, jquery, Ajax. A kiválasztott technológia alapján létrehozunk egy szkriptet honlapunkra, és beillesztünk a webhelyre. A parancsfájl attól függően létrejön, amire szüksége van: A háttérzene automatikus reprodukálása a webhelyen vagy a felhasználó által vezérelt játékoson. Ezután hozzon létre egy mappát a zenei webhely gyökerében, és töltse be az audio fájlokat.

Vagy alternatív kompatiblitásként létrehozhat egy lejátszót a flash technológián (Flash), egy ilyen játékos hatékonyabban fog megjelenni. Az igazság drágább és nehezebb lesz a webhelyen (növeli a webhely oldalainak letöltésének idejét).

2 út.

Zene telepítése a html segítségével

A HTML és a böngésző képességek segítségével beilleszthető a webhely lejátszójához vagy a háttérzenéhez. A technológia egyszerű: HTML5 kód jön létre a „Hang” címkét, és ezt a kódot van írva, hogy a helyszínen, és amikor a felhasználó belép az oldalra, akkor lát egy minimalizált játékos, a látogató rákattint a Play gombot, vagy automatikusan elkezd játszani háttérzene. A játékos nézete attól függ, hogy a látogató jött, de a funkcionalitás standard marad: a lejátszás, a leállítás, a következő, a prev, hangerő gombok. Úgy néz ki, mint egy játékos, aki ilyen HTML kóddal rendelkezik:

A cam kód beillesztéséhez úgy néz ki, mint ez:

Amint észlelte, hogy a "Controls AutoPlay" parancs tartalmaz zenét lejátszás, amint a látogató a webhelyre kerül.

A HTML-kód alternatív változata a "BGSound" címke, egyáltalán nem használ egy vizuális lejátszót, amikor meglátogatja az oldalt, elkezdi zenét lejátszani a webhelyen, de állítsa be a hangerőt, szüneteltetni, stb. A felhasználó nem lesz képes. A hangfájl lejátszásának beállítása a kódban van konfigurálva.

A zene lejátszásához használt hangfájlok formátuma lehet: WAV, AU, MIDI, MP3, OGG (kiterjesztések). A zenei fájlok betöltődnek a webhelyre, vagy linkek azokhoz a webhelyekhez, ahol a hangfájl található, a legfontosabb dolog az, hogy a nyílt hozzáférés.

Milyen gyakran kellett keresned az interneten tetsző zenét? Ez az, amit hallott a kedvenc webhelyén (szociális hálózatok, zenei portálok). Gyakran előfordul, hogy egyszerűen nem más.
Mate "Seekers" azt fogja mondani, hogy nem. Tekintsük úgy, hogy az átlagos felhasználó, akinek a technológiák ismerete nem teszi lehetővé az "ásás" az oldal forráskódjában vagy a gyorsítótárban.

Ez így történt, hogy a legtöbb barátom csak ilyen felhasználók. Itt, és úgy döntöttek, hogy ezt a króm (és hasonlók) bővítését írják.

Mi lehet

  • Letöltés bármely audiofájl bármely webhelyről (MP3, WAV)
  • Helyesen határozza meg az eredeti nevet
  • Az időtartamot, a méretet és a bitsebességet mutatja
  • Töltse le ugyanazon az oldalon, mint egy sáv (átirányítás nélkül)
  • Előnézeti fájl
Próbálja ki a krómbolt bővítményét

Néhány kép és videó:

Örülök az egészséges kritikával. Remélem, valaki hasznos lesz ehhez a terjeszkedéshez.
Ha érdekel, akkor a közeljövőben áttekintést teszek a forrásban egy másik hubban, és a Githubon helyezkednek el.
Szintén a Firefox és az IE kikötőjének terveiben is.

P.S\u003e A videó letöltésének lehetősége is ott van, de jelenleg ki van kapcsolva (kis problémák vannak a streaming video-val).

HTML nyelv
Hang és videó behelyezése


Hangbetét. Címke
Hozzáadja, reprodukálja és szabályozza az audio felvételeket egy weboldalon. A fájl elérési útja az attribútumon keresztül történik src vagy beágyazott címke .


Szintaxis:


Néhány

Tag attribútumok

    automatikus lejátszás - a hang az oldal betöltése után azonnal lejátszható;

    ellenőrzések. - Adja hozzá a vezérlőpultot audiofájlhoz;

    hurok. - megismétli a hangszaporodást az elejétől a befejezés után;

    előtöltés. - A fájl letöltéséhez a weboldal letöltésével együtt;

    src

A záró címke gyógyító.
Belső konténer

Példa:


Videó beszúrása. Címke
Hozzáadja, reprodukálja és ellenőrzi a videó beállításait egy weboldalon. A fájl elérési útja az attribútumon keresztül történik src vagy beágyazott címke .


Szintaxis:


Néhány Az elemek különböző fájlokkal társíthatók. A böngésző az első indított formátumot használja.

Tag attribútumok

    automatikus lejátszás - A videó automatikusan lejátszódik az oldal betöltése után;

    ellenőrzések. - hozzáadja a vezérlőpultot a videóhoz;

    hurok. - ismételje meg a videó lejátszását az elejétől a befejezése után;

    magasság - meghatározza a terület magasságát a videó lejátszásához;

    szélesség. - meghatározza a videó lejátszásához szükséges terület szélességét;

    előtöltés. - a videó letöltése a weboldal letöltésével együtt;

    src - Meghatározza a lejátszható fájl elérési útját.

A záró címke gyógyító.
Belső konténer


Példa:


A böngésző példája eredménye:

A helyszínen lévő zene meglehetősen ritka, mint a norma. Zene beillesztésével a webhelyre meg kell értened, hogy egyes felhasználók mindent megtesznek és elnyomnak. Ebben a cikkben több opciót fogunk megnézni, amely zenét helyez el a webhelyre, valamint fontolja meg, hogyan lehet háttérzenét készíteni.

Hogyan kell beilleszteni a háttérzenét a webhelyre

A háttérzene behelyezése a webhelyen a legveszélyesebb lehetőség a látogatók elvesztése szempontjából. Mivel a háttérzene nem elegendő, hogy lehetetlen kikapcsolni, így a hangerőre nem állítható (mindez a számítógép aktuális hangerejétől függ). Szóval meg kell gondolkodnod százszor, mielőtt beilleszti a háttérzenét.

Kétféleképpen kell beilleszteni a zenét a HTML-ben

1. lehetőség HTML-címke segítségével

Szintaxis a háttérzene beillesztéséhez

Taga Számos attribútum van:

  • hurok \u003d "érték" - a zenei ismétlések száma (ha -1, majd megismételve végtelenül)
  • balance \u003d "érték" - sztereó egyenleg (-5000-től 10 000-ig)
  • volume \u003d "érték" - hangerő (0 maximum, -10000 minimum)

A zene automatikusan lejátszódik az oldal letöltésekor.

például

2. lehetőség a címkén keresztül

Szintaxis egy objektum zenével való beillesztéséhez

Taga Lehetőség van a következő attribútumok használatára:

  • szélesség \u003d "Érték" - szélesség (pixelben vagy százalékban)
  • magasság \u003d "érték" - magasság (pixelben vagy százalékban)
  • align \u003d "Érték" - Alignment (bal - bal, jobb, jobb, központ - központ)
  • rejtett \u003d "érték" - a panel láthatósága (igaz - elrejti, hamis - show), az alapértelmezett panel látható
  • autoStart \u003d "Érték" - Zene lejátszása betöltésekor (igaz - igen, hamis - nem)
  • hurok \u003d "érték" - érték igaz - játék egy körben, hamis - egyszer

például

Minden böngésző különböző módon fog kinézni, így különféle módon fogjuk megvizsgálni mindegyiküket.

HTML5-ben használhatja a címkét

A címke jelentése

Szintaxiscímke

A következő attribútumok használhatók:

  • autoPlay \u003d "Érték" - Az oldal letöltésekor azonnal engedélyezze a zenét
  • vezérlők \u003d "Érték" - A lejátszó kezelőpaneljének megjelenítése a böngészőben
  • hurok \u003d "jelentés" - a ciklikus felelősségteljes
  • preload \u003d "Érték" - Zene letöltése azonnal az oldal letöltésével

A véleményem szerint a véleményem szerint nem ideális megoldások, mivel mindegyik rendszeres játékosokon alapul. Minden böngészőnek saját alapértelmezett lejátszója lesz, és egyesekben egyáltalán nem működhet. Ezért a legjobb, ha letölti a lejátszót a webhelyére, és letöltheti a zenét. Ez a lejátszó rendelkezik stop funkcióval, hangerő beállításokkal stb. - Minden szükséges készlet egy egyszerű felhasználó számára.

Ez a kérdés nagyon gyakran megtalálható, ezért úgy döntöttem, hogy külön cikket fordítok a leckék leckéiben. Mivel az audió univerzális technológia minden böngészőben, HTML nem, akkor a probléma megoldására, azt javaslom, hogy töltse le a fájlt audiolejátszó, ahogy az a legtöbb helyen. Mindent megteszünk a következő lépésekben:

1. A tárhelyen, ahol a webhely a gyökérkönyvtárban található (mappa, ahol az indexfájl) megfelel az audio mappának. A jövőben minden hangfájlt elhelyez.

3. Most válassza ki a kívánt fájlokat, jobb MP3 formátumban. Mappa létrehozás hang. A helyszín gyökerében és letölteni őket.

4. Csak a lejátszó kapcsolati kód beillesztése marad. Megfelel a helyszínen a megfelelő helyen. Csak adja meg a lejátszófájl és a hangfájl elérését, a szavak helyettesítését your_domen és név_ADIO_FILE:






És minden készen áll! Láthatjuk és dolgozni. példa.

Hogyan telepíthető háttérzene HTML-ben

A HTML és a böngésző képességeit használom, beillesztheti a háttérzenét az oldalra is. A kívánt formátumú hangfájlra van szüksége: WAV, AU, MIDI vagy MP3. Például bármely fájlt használhat a megadott kiterjesztéssel.

Első módszer - Ez a beágyazás címke. A beágyazott elemeket objektumok letöltésére és megjelenítésére használják (például videofájlok, flash hengerek, néhány hangfájl stb.), Hogy a böngésző nem érti.

A szintaxis elég egyszerű:

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

Most egy példát írunk az attribútumokkal és az alatti dekódolással:

Az attribútumok beágyazják a címkét a HTML-ben
Szélesség - panel szélessége képpontokban (vagy százalékban)
Magasság - A panel magassága pixelben (vagy százalékban)
Align - A panel helye a szöveghez képest, lehetséges bal, jobb, központ
Rejtett - Lehetővé teszi a panel elrejtését, attribútumértékeket: A True - panel rejtett, hamis - panel látható (alapértelmezett érték)
AutoStart - True - A lejátszó automatikusan elindul, ha az oldal betöltődik, a FALSE várja a lejátszási gombot
Hurok - ciklus, true - pálya játék egy körben, és hamis értékkel - csak egyszer

A második út. Nagyon régi, de praktikus is) Adjon hozzá egy dallamot ugyanazon a mappába (könyvtár), ahol a fájl hazudik, és a testben írja a következő kódot:


Ennek eredményeképpen az oldal betöltése után a BGSound címkén megadott dallamot hangzik. Most fontolja meg a jobb attribútumok címkét :

src - A hangfájl elérési útja
hurok. - Hányszor ismételheti meg a dallamot (ha -1, majd megismételjük végtelenül)
egyensúly - a sztereó egyenleg értéke (-5000-től 10 000-ig)
hANGERŐ. - kötet hangerő dallam, ahol 0 maximum és -10000 minimum.

Azonban nem lesz képes valahogy irányítani a lejátszót - minden alkalommal, amikor az oldal frissül, a pályát újra lejátszani fogják.

A háttérzene beillesztésének módját követően meg akarom engedni Öntől, mivel a legtöbb felhasználó a különböző helyszínek meglátogatásakor már zenét hallgat. Ezért a zenei kíséret csak közel állhat hozzá, hogy bezárja a lapot a webhelyen.

Audio és zene beillesztése HTML5 - TAG AUDIO


hang. - Egy pár címke, amely meghatározza a háttér hangját, zenéjét vagy más audioáramát a webhelyen.

Attribútumok címke hang.

automatikus lejátszás- A fájlt közvetlenül az oldal betöltésekor játssza le (hasonló a BGSound háttérzenéhez)
ellenőrzések. - A lejátszó kezelőpaneljének megjelenítése a böngészőben
hurok. - elveszíti a vége után újra
előtöltés. - Audio fájl letöltése a letöltési oldalon
src - Audio fájl (MP3 vagy OGG) elérési útja

A hangjelző kód kódja





TAG AUDIO.


Hang a html 5-ben