Kuidas sisestada helifaili HTML-is. Salvesta heli internetist failide

Miks sa vajad kohapeal muusikat?

Pigem huvitav küsimus, mängida muusika- või häälfailid saidil või sisseehitatud mängija aitab saidi külastajad lõõgastuda, põhjustab positiivseid emotsioone ja seab soovitud viisil, nii et rääkida hõlbustab suhtlemist saidiga. Kuid need mõjud toimivad ainult siis, kui kohapeal olev muusika valitakse õigesti ja helitugevus ei ületa lubatud piiranguid, vastasel juhul on kõik teie jõupingutused asjata ja põhjustavad negatiivseid emotsioone saidi külastajatelt.

Kuidas sisestada HTML-i saidile heli (muusika)?

Me palume sageli sellist küsimust, muusika kohapeal on asjakohane ja loominguline element ning seal on palju võimalusi selle paljundamiseks ja neid ei ole nii raske rakendada. Alustame asjaoluga, et iga globaalse võrgu kasutaja kasutab internetiühenduse kasutamiseks ühtegi brauserit ja üldist ja universaalset tehnoloogiat ei ole heli- ja muusikafailide esitamiseks, iga brauseri töötab oma algoritme ja nad on mõnevõrra erinevad üksteisest Seega võib HTML-i lehekülje koodi sissejuhatuse abist muusika mängimisel tekkida. Aga nagu te teate, lahendatakse kõik probleemid!

Sisestage muusika HTML-i, JavaScript, Jquery, Ajaxi meetodid:

1 tee.

Muusikapleieri heli loomine veebisaidil või mängija

Tehnoloogia on lihtne, mängija fail on loodud nii, et see ei laadita saidi või serverit valida tehnoloogia, mida me kasutame: JavaScript, Jquery, Ajax. Valitud tehnoloogia põhjal arendame teie saidi skripti ja sisestame saidile. Skript on loodud sõltuvalt sellest, mida vajate: taustamuusika automaatse reprodutseerimise kohapeal või kasutaja juhitud mängija. Järgmisena looge kaustus kohapeal muusika ja laadige helifaile.

Või alternatiivse ühildumise korral saate luua välklambi tehnoloogia (välk) mängija, nagu mängija vaatab tõhusamalt. Tõde on saidi kallim ja raskem (suurendab saidi lehekülgede allalaadimise aega).

2 tee.

Muusika paigaldamine saidile HTML-i abil

HTML-i ja brauseri võimaluste kasutamine võib sisestada saidi mängija või taustamuusika. Tehnoloogia on sama lihtne: HTML5 kood on loodud "Audio" sildiga ja see kood on kirjutatud saidile ja kui kasutaja siseneb saidile, näeb ta minimeeritud mängija, külastaja klõpsab mängu nuppu või algab automaatselt taustamuusika. Mängija vaade sõltub brauserist, kust külastaja tuli, kuid funktsionaalsus jääb standardi: Play, Stop, Järgmine, Eelmine, helitugevuse nupud. Paistab, et mängija HTML-koodiga:

CAM-kood paigaldamiseks näeb välja selline:

Nagu te märgata, "Controls AutoPlay" käsk hõlmab muusika taasesitust niipea, kui külastaja jõuab saidile.

HTML-koodi alternatiivne versioon on "BGsound" tag, see ei kasuta üldse visuaalset mängijat, kui saidi külastades alustab muusika esitamist kohapeal, kuid reguleerige helitugevust, pange pausile jne. Kasutaja ei saa. Helifaili taasesituse seadistamine on konfigureeritud koodis ise.

Helifailide vormingud saidil muusika mängimiseks võib olla: WAV, AU, MIDI, MP3, OGG (laiendused). Muusikafailid laaditakse saidile või lingid nendele saitidele, kus helifail asub, on peamine asi, et see on avatud juurdepääsetavasse.

Kui tihti sa pidid otsima muusikat, mida soovite võrgus? See on see, mida sa kuulsid oma lemmikpaikil (sotsiaalsed võrgustikud, muusikaportaalid). Sageli juhtub see, et see pole lihtsalt veel mitte.
Mate "otsijad" ütlevad, et see ei ole. Kuid kaalume keskmist kasutajat, kelle teadmised tehnoloogiate teadmised ei võimalda lehekülje või vahemälu lähtekoodil "kaevamine".

Nii juhtus, et enamik mu sõpru on lihtsalt sellised kasutajad. Siin nende jaoks ja otsustati kirjutada selle kroomi laienemise (jms).

Mida saab

  • Lae alla iga helifail mis tahes saidilt (MP3, WAV)
  • Õigesti määrab algse nime
  • Näitab kestust, suurust ja bitikiirust
  • Laadige alla sama lehe all (ilma suunamata)
  • Eelvaate fail
Proovige laiendamist kroomipoodist

Mõned pildid ja video:

Ma olen rahul terve kriitikaga. Loodan, et keegi on selle laienemise jaoks kasulik.
Kui olete huvitatud, siis lähitulevikus avaldan ma ülevaate allikast teises keskuses ja panna GitHubis.
Ka plaanides sadama Firefox ja IE.

P.S\u003e Video allalaadimise võimalus on ka seal, kuid hetkel on see välja lülitatud (streaming videoga on väikesed probleemid).

Html keel
Heli ja video sisestamine


Sound Insert. Tag
Lisab, reprodutseerib ja kontrollib veebilehe helisalvestisi. Faili tee on määratud atribuudi kaudu src või pesastatud tag .


Süntaksi:


Mõned

Tag atribuudid

    autoplay - heli hakkab kohe pärast lehe laadimist kohe mängima;

    juhised. - lisab juhtpaneeli helifailile;

    loop. - kordab heli paljunemist algusest pärast selle lõpetamist;

    eelpinguti. - kasutatakse faili allalaadimiseks koos veebilehe allalaadimisega;

    src

Sulgemismärk on ravikindla.
Sees konteiner

Näide:


Sisestage video. Tag
Lisab, reprodutseerib ja kontrollib veebilehe video seadeid. Faili tee on määratud atribuudi kaudu src või pesastatud tag .


Süntaksi:


Mõned Elemente saab seostada erinevate failidega. Brauser kasutab esimest käivitatud vormi.

Tag atribuudid

    autoplay - video käivitab automaatselt pärast lehe laadimist automaatselt;

    juhised. - lisab video juhtpaneeli;

    loop. - kordab video taasesitust algusest pärast selle lõpetamist;

    kõrgus - täpsustab videokõrgus video esitamiseks;

    laius. - Määrab video esitamise piirkonna laiuse;

    eelpinguti. - Kasutatakse video allalaadimiseks koos veebilehe allalaadimisega;

    src - täpsustab tee mängitav faili.

Sulgemismärk on ravikindla.
Sees konteiner


Näide:


Brauseri näite tulemus:

Muusika kohapeal on üsna haruldane kui norm. Sisestades muusikat saidile, peate mõistma, et mõned kasutajad saavad ja suruda üldse. Käesolevas artiklis vaatame mitmeid võimalusi, mis sisestavad muusika saidile, samuti kaaluma, kuidas teha taustamuusikat.

Kuidas sisestada taustamuusika saidile

Taustamuusika sisestamine kohapeal on külastajate kaotamise kõige ohtlikum valik. Kuna taustamuusika ei piisa sellest, et väljalülitamist ei ole võimalik välja lülitada, seega ei ole see ka reguleeritav mahule (see kõik sõltub arvuti praegusest mahust). Nii et peate enne taustamuusika sisestamist mõtlema sada korda.

Muusika sisestamiseks on kaks võimalust HTML-is

Võimalus 1. HTML-märgise kaudu

Süntaksi taustamuusika sisestamiseks

Tagas On mitmeid atribuute:

  • loop \u003d "Väärtus" - muusika korduste arv (kui -1, siis korrata lõpmata korrata)
  • balance \u003d "Väärtus" - stereosaldo (-5000 kuni 10 000)
  • helitugevus \u003d "Väärtus" - maht (0 Maksimaalne, -10000 minimaalne)

Muusika mängib lehe allalaadimisel automaatselt automaatselt.

näiteks

Võimalus 2. Sildi kaudu

Süntaksi muusikaga objekti sisestamiseks

Tagas On võimalik kasutada järgmisi atribuute:

  • laius \u003d "Väärtus" - laius (pikslites või protsentides)
  • kõrgus \u003d "väärtus" - kõrgus (pikslites või protsentides)
  • align \u003d "väärtus" - joondamine (vasakpoolne vasakpoolne, parem - parem, keskus)
  • peidetud \u003d "väärtus" - paneeli nähtavus (TRUE - Peida, False - Show), Vaikimisi paneel on nähtav
  • autostart \u003d "Väärtus" - muusika esitamine laadimisel (TRUE - Jah, False - Ei)
  • loop \u003d "väärtus" - väärtus TRUE - Mängi ringi, False - üks kord

näiteks

Iga brauser näeb välja nagu tavaline mängija erinevatel viisidel, nii et me ei pea igaüks neist eraldi.

HTML5-s saate sildi kasutada

Sildi tähendus

Süntaksi sild

Kasutada saab järgmisi atribuute:

  • autoPlay \u003d "Väärtus" - Luba muusika kohe lehe allalaadimisel
  • juhtimisseadmed \u003d "Väärtus" - kuvab mängija juhtpaneeli brauseris
  • loop \u003d "tähendus" - vastutab tsüklilise
  • prelaadi \u003d "Väärtus" - laadige alla muusika kohe lehekülje allalaadimisega

Peegeldatud võimalused minu arvates ei ole ideaalsed lahendused, kuna kõik põhinevad tavalistel mängijatel. Igal brauseril on oma vaikimisi mängija ja mõnes ta ei saa üldse töötada. Seetõttu on kõige parem alla laadida mängija saidile ja alla laadida muusikat. Sellel mängijal on peatusfunktsioon, helitugevuse seaded jne. - kõik vajalikud seadistatud lihtsa kasutaja jaoks.

Seda küsimust leitakse väga sageli, nii et ma otsustasin pühendada õppetundide õppetundidel eraldi artiklit. Kuna heli universaaltehnoloogia mängimiseks kõigile brauseritele ei ole HTML-i, siis selle probleemi lahendamiseks pakun ettepaneku alla laadida audio-mängija faili, nagu tehakse enamiku saitide puhul. Me teeme kõik sammudes:

1. Hostingis, kus teie sait asub juurkataloogis (kaust, kus indeksi fail), sobitage audio kaust. Tulevikus asetate kõik helifailid.

3. Nüüd valige soovitud failid, parem MP3-vormingus. Loo kaust heli. Kohapeal ja laadige need alla.

4. Mängija ühenduse koodi sisestamiseks jääb see ainult. See sobib igas kohas õiges kohas. Sa peaksid ainult määrata tee mängija faili ja audiofaili, asendades sõnad your_domen ja name_audio_file:






Ja kõik on valmis! Võite näha ja töötada. näide.

Kuidas paigaldada taustamuusika HTML-is

Ma kasutan HTML-i ja brauseri võimalusi, saate sisestada ka taustamuusika lehele. Teil on vaja helifaili soovitud formaadis: WAV, AU, MIDI või MP3. Näidetena saate kasutada ühtegi faili.

Esimene meetod - See on embed tag. Embed elementi kasutatakse objektide allalaadimiseks ja kuvamiseks (näiteks videofailide, flash-rullide, mõne helifailide jne allalaadimiseks, et brauser ei saa aru.

Süntaks on üsna lihtne:

Sulgemismärgis ei ole vajalik.

Nüüd näeme näidet kirjalikult atribuutidega ja allpool nende dekodeerimisega:

Atribuudid Embed Sildi mängida heli HTML
Laius - paneeli laius pikslites (või protsentides)
Kõrgus - paneeli kõrgus pikslites (või protsenti)
Align - paneeli asukoht võrreldes teksti, võimalik vasakule, paremale, keskele
Varjatud - võimaldab teil peita paneeli, atribuutide väärtused: TRUE - paneel on peidetud, vale paneel nähtav (vaikeväärtus)
Autostart - TRUE - Mängija algab automaatselt, kui leht on laaditud, vale ootab taasesitusnuppu
Loop - tsükkel, Tõsi - Rööbasteel ringis ja vale väärtusega - ainult üks kord

Teine võimalus. Väga vana, aga ka praktiline) Lisage meloodia sama kausta (kataloog), kus teie fail on valetamine ja kehas, kirjutate järgmise koodi:


Selle tulemusena kõlab lehe laadimisel pärast selle laadimist BGSound Sildi meloodia. Nüüd kaaluge paremat atribuutide tag :

src - tee oma audiofaili teele
loop. - Mitu korda saab meloodiat korrata (kui -1, siis korrata) korrata)
tasakaal - stereo tasakaalu väärtus (-5000 kuni 10 000)
maht. - mahu valjusti meloodia, kus 0 maksimaalne ja -10000 miinimum.

Siiski ei ole võimalik mängija kuidagi juhtida - iga kord, kui lehte uuendatakse, mängitakse rada uuesti.

Pärast taustamuusika sisestamise meetodi kirjeldamist tahan ma teid selle eest lahendada, sest enamik kasutajaid erinevate saitide külastamise ajal kuulates muusikat. Seetõttu associated muusikaline saatel saab muuta selle lihtsalt sulgeda vahekaardi saidiga.

Sisestage heli ja muusika HTML5 - Sildi heli


heli. - paari tag, mis määratleb saidi taustheli, muusika või muu audiovoogu.

Atribuutide märgistamise heli.

autoplay- Lehe laadimisel mängitakse fail kohe (sarnane taustamuusika bgsound)
juhised. - Näita mängija juhtpaneeli brauseris
loop. - kaotab faili pärast selle lõppu uuesti
eelpinguti. - allalaadimise lehekülje allalaadimine Audio-fail
src - tee helifailile (MP3 või OGG)

Proovi kood märgistatud audioga





Märgistage heli.


Audio HTML-is 5