Ovo pitanje je vrlo često, pa sam odlučio da mu posvetim poseban članak u lekcijama. Budući da HTML nema univerzalnu tehnologiju za reprodukciju zvuka za sve pretraživače, da biste riješili ovaj problem, predlažem preuzimanje datoteke audio playera, kao što se radi na većini stranica. Sve radimo korak po korak:

1. Na hostingu na kojem se nalazi vaša stranica, u korijenskom direktoriju (fascikli u kojoj se nalazi indeksna datoteka), kreirajte audio folder. U budućnosti ćete u njega postavljati sve audio datoteke.

3. Sada odaberite željene datoteke, po mogućnosti u mp3 formatu. Kreirajte folder audio u korijenu stranice i preuzmite ih.

4. Ostaje samo da unesete kod za povezivanje plejera. Pogodan je za bilo koju stranicu Na pravom mjestu, samo trebate navesti putanju do datoteke playera i audio datoteke, zamjenjujući riječi u skladu s tim vaša_domena I audio_filename:

I sve je spremno! Možete vidjeti rad primjer.

kako postaviti pozadinsku muziku u html-u

Koristeći moć HTML-a i pretraživača, takođe možete umetnuti pozadinsku muziku na stranicu. Trebat će vam audio datoteka potrebnog formata: WAV, AU, MIDI ili MP3. Možete koristiti bilo koju datoteku sa navedenom ekstenzijom kao primjer.

Prvi način je oznaka za ugrađivanje. Element embed se koristi za učitavanje i prikaz objekata (kao što su video fajlovi, flash filmovi, neki audio fajlovi, itd.) koje pretraživač izvorno ne razume.

Sintaksa je prilično jednostavna:

Završna oznaka nije potrebna.

Sada gledamo primjer zapisa s atributima, a ispod s njihovim dekodiranjem:

Ugradite atribute oznake za reprodukciju zvuka u html-u
širina - širina panela u pikselima (ili procentima)
visina - visina panela u pikselima (ili procentima)
align - položaj panela u odnosu na tekst, moguće vrijednosti su lijevo, desno, centar
hidden - omogućava sakrivanje panela, vrijednosti atributa: true - panel je skriven, false - panel je vidljiv (podrazumevana vrijednost)
autostart - true - plejer se automatski pokreće kada se stranica učita, false - čeka da se pritisne dugme za reprodukciju
loop - petlja, true - numera se pušta u krug, a ako je netačno - samo jednom

Drugi način. Vrlo staro, ali i praktično) Dodajte melodiju u isti folder (direktorij) u kojem se nalazi vaš fajl, a u tijelo upišite sljedeći kod:

Kao rezultat toga, nakon učitavanja stranice, zvučat će melodija koju ste naveli u bgsound tag-u. Sada pogledajmo bliže atribute oznaka :

src- put do vaše audio datoteke
petlja- koliko puta ponoviti melodiju (ako je -1, onda se ponavlja beskonačno)
balans- vrijednost stereo balansa (od -10000 do 10000)
volumen- jačina melodije, pri čemu je 0 maksimum, a -10000 minimum.

Međutim, neće biti načina da se na bilo koji način kontrolira plejer - svaki put kada se stranica osvježi, numera će se ponovo reprodukovati.

Nakon što sam opisao način umetanja pozadinske muzike, želim da vas odvratim od ovoga, jer većina korisnika po pravilu već sluša muziku u trenutku posete raznim sajtovima. Stoga ga prateća muzička pratnja može samo natjerati da zatvori karticu sa sajtom.

Ugrađivanje zvuka i muzike u HTML5 - audio tag

audio- oznaka para koja definira pozadinski zvuk, muziku ili drugi audio tok na web lokaciji.

Atributi audio oznaka

autoplay- fajl se reprodukuje odmah pri učitavanju stranice (slično bgsound pozadinskoj muzici)
kontrole- prikazati kontrolnu tablu plejera u pretraživaču
petlja- ponovo reprodukuje fajl nakon što se završi
preload- audio datoteka će biti učitana zajedno sa učitavanjem stranice
src- put do audio datoteke (mp3 ili ogg)

Uzorak koda sa audio oznakom

Audio u HTML 5

Međutim, internetski sadržaj je često jedinstven, na primjer, ne uključuje samo muziku, već i komentare izvođača, intervjue, razne priče o stvaranju itd.

Stvoren je nevjerovatan broj uslužnih programa za preuzimanje streaming sadržaja s weba - neki od njih su univerzalni, drugi su "izoštreni" za određene usluge. Neki programi dobijaju pristup originalnim audio i video datotekama i jednostavno ih čitaju bajt po bajt sa interneta, a neki mogu nastaviti sa preuzimanjem, otpremati datoteke u više tokova, raditi sa grupama fajlova, itd. Opis toka može biti xml datoteka u formatu ASX (za Windows Media Player) ili pohranjenim u datotekama formata RealAudio (.ra i .rm ekstenzije za audio, .rv za video), itd. Takvi tokovi se isporučuju ne samo putem standardnih http, udb / tcp protokola, ali i posebne - rtsp, mms, rtp, kao i kroz peer-to-peer tehnologije koje se koriste, na primjer, u tako popularnom Internet TV servisu kao što je SopCast. Naravno, da biste puštali ove formate, potreban vam je odgovarajući klijent - recimo Windows Media Player, VLC media player i tako dalje. Potonji, inače, ne može samo reproducirati streaming sadržaja, već ga i pohraniti na lokalne diskove. Njega ćemo koristiti, jer mu je većina resursa prilično teška.

Dakle, da biste snimili, posebno, onlajn radio program ili podcast, prvo morate da dobijete vezu do striming sadržaja, a zatim da je unesete u VLC plejer. Ako vaša stranica koristi Windows Media Player za reprodukciju zvuka, lako je doći do veze. Potrebno je da kliknete desnim tasterom miša na plejer ugrađen na stranici sajta i izaberete "Svojstva". U polju "Postavljanje" pronađite adresu i kopirajte je u međuspremnik. Ako web lokacija koristi Flash player ili plejer razvijen na bazi HTML5, onda je vjerovatno da ćete morati kopati po izvornom kodu stranice ili se obratiti posebnim uslužnim programima kako biste "izvukli" veze.

Sljedeći korak je pretvaranje streaming audio. Možda ne možete reći da je ova operacija u VLC-u jednostavna i očigledna. Naprotiv, to je glomazno i ​​zbunjujuće. Naredba menija "Media Open URL" streaming sadržaja može se upisati u datoteku. Podrazumevano, VLC je podešen da reprodukuje vezu, a da biste je sačuvali u datoteku, potrebno je da promenite režim u "Konvertuj" u dijaloškom okviru koji se otvori. Istovremeno će se promijeniti dijalog - u novom prozoru je naznačena ciljna datoteka i odabran profil (tj. format u kojem će snimak biti sačuvan). Nakon pritiska na tipku "Start", plejer počinje kopirati streaming audio u datoteku. On to radi potpuno neprimjetno i, u principu, može pisati koliko god želi - ovaj proces će se morati kontrolirati neovisno. Imajte na umu da kada zaustavite i nastavite proces konverzije, rezultirajući fajl se resetuje na nulu. Dakle, morate preimenovati prethodno sačuvane fajlove.

Sasvim je očigledno da je vrlo problematično ponavljati takvu operaciju svaki put. Pogotovo ako želite pisati različite streamove u različito vrijeme. VLC player pruža jednostavan alat za planirano preuzimanje pod nazivom VLC Configurator. Označava šta i gdje treba pisati (ovi parametri su konfigurisani na isti način kao što je gore opisano) i koliko dugo. Na primjer, ako trebate svaki dan snimiti određeni Internet radio program, trebate postaviti opcije „Ponavljanje“ i „Interval između ponavljanja“ u dijalogu. Sada će program automatski konvertirati streaming sadržaj nakon pokretanja.

Inače, VLC će pomoći i u konverziji streamova, na primjer, ASF datoteka u poznatiji i razumljiviji MP3 za džepne plejere. Ova operacija se može obaviti ili ručno, svaki put kada se konvertuje lokalna datoteka, ili automatski pomoću jednostavne Powershell skripte, koja je, kao što znate, dio Windows 7 i dostupna je u ranijim verzijama ovog operativnog sistema. Nekoliko parametara se prosljeđuje skripti - putanja do datoteka, maska ​​datoteka i opciono rezultirajuća mapa u kojoj su datoteke pohranjene (ako nije specificirano, datoteke se upisuju u izvorni direktorij). Unutar petlje poziva se VLC program kojem se šalju parametri: šta kodirati, gdje napisati i stvarni parametri kodiranja. Na kraju kodiranja, VLC se učitava iz RAM-a. Posljednja konstrukcija, koja čeka dok se proces ne isprazni iz memorije, omogućava vam da to provjerite. Takvu skriptu možete unijeti u bilo koji uređivač teksta - notepad ili poseban "vizualni" Powershell ISE editor. Ako ga snimite u datoteku, na primjer convert.ps1, tada se pokreće konstrukcijom obrasca:

. convert.ps1 c:  files  music *.asf.

U zaključku, vrijedi napomenuti još nekoliko karakteristika skripte. Operativni sistem Windows ne piše automatski putanje do programa, tako da morate navesti i putanju do vlc.exe u skripti: u 64-bitnoj verziji - C:  'Program Files (x86) '  VideoLAN  VLC   (imajte na umu da redovi sa razmaci su zatvoreni u navodnike) iu 32-bitnom - C:  'Program Files'  VideoLAN  VLC  . Pored toga, trebalo bi da se uverite da ste izašli iz VLC programa pre pokretanja skripte, inače će metoda waitforexit() raditi neograničeno (zbog izlaska programa pozvanog u skripti, ali njegova kopija ostaje). Naravno, također je moguće rukovati ID-ovima procesa u skripti, ali ova mogućnost će to samo zakomplicirati. Da biste rešili ovaj problem, trebalo bi jednostavno da dodate prinudni prekid svih pokrenutih VLC-ova na početak skripte: ps vlc* | %( $_.kill()). Još jedna karakteristika se odnosi na sigurnosni sistem Windows 7, koji zahtijeva da sve skripte budu potpisane. Komanda Set-ExecutionPolicy RemoteSigned, koju morate pokrenuti u Powershell-u kao administrator, pomoći će vam da zaobiđete ovo ograničenje.

Convert.ps1 Powershell skripta za pretvaranje streaming sadržaja u MP3

param ( $inputpath, $wildcard, $outputpath = $inputpath)

ls -path $inputpath  $wildcard | %(

Write-host $outputfile

vlc -i lažni $_.fullname ¨:sout=#transcode (acodec=mp3,ab=128,channels=2):standard (access=file,mux=asf,dst=$outputfile)¨ vlc://quit

Ekstrakt audio iz FLV video zapisa

Još jedan primjer zajedničkog korištenja VLC-a i Powershell-a je izdvajanje zvuka iz FLV Flash video zapisa. Takvi video klipovi se pohranjuju na specijalizovanim portalima, kao što je, na primjer, ozloglašeni YouTube. Naravno, Google i drugi vlasnici video hostinga na sve moguće načine sprečavaju preuzimanje sadržaja, ali uvijek postoje načini da zaobiđete zaštitu i dobijete video koji vam se sviđa...

Međutim, zadatak o kojem se ovdje raspravlja je sljedeći: kako izdvojiti audio iz FLV datoteke učitane na bilo koji poznati način da biste ga, na primjer, slušali u džepnom plejeru. Takva operacija je sasvim u okviru moći VLC-a, kako u GUI-u tako i iz komandne linije. Usput, u prvom slučaju morate učiniti gotovo isti skup radnji kao i prije: odaberite naredbu "Mediji - Pretvori" / "Spremi" iz izbornika, navedite izvorne i odredišne ​​datoteke, kao i konverziju parametre, odnosno odgovarajući kodek.

Za ručnu konverziju pomoću Powershell-a potrebno je, kao i prošli put, da napravite malu skriptu (nazovimo je flv2mp.ps1), kojoj se šalju nazivi izvornog i odredišnog foldera (podrazumevano - isto kao i izvorni). Cijeli trik leži u proslijeđenim parametrima: pošto video nije potreban, trebali biste koristiti lažni parametar, definirati parametre datoteke u standardnom bloku, a kako skripta ne bi smetala iskačućim prozorima, jednostavno ih blokirajte pomoću opcija --dummy-quiet --sout.

param ( $inputpath, $outputpath = $inputpath)

ls -path $inputpath  *.flv | %(

$outputfile = Join-path $outputpath($_.name.replace($_.extension, '.mp3'))

Write-host $outputfile

vlc $filename -I dummy --dummy-quiet --sout ¨#transcode (acodec=mp3,vcodec=dummy):standard (access=file,mux=raw,dst='$outputfile')¨ vlc://quit

ps vlc | %($_.waitforexit())

HTML jezik
Ugradite audio i video

Ubaci zvuk. Tag
Dodaje, reprodukuje i upravlja postavkama snimanja zvuka na web stranici. Putanja do datoteke se postavlja preko atributa src ili ugniježđena oznaka .

sintaksa:

Nekoliko

Atributi oznake

autoplay- zvuk počinje da se reprodukuje odmah nakon učitavanja stranice;

kontrole- dodaje kontrolni panel audio fajlu;

petlja- ponavlja reprodukciju zvuka od početka nakon njenog završetka;

preload- koristi se za preuzimanje datoteke zajedno sa preuzimanjem web stranice;

src

Završna oznaka je obavezna.
Unutar kontejnera

primjer:

Ubaci video. Tag
Dodaje, reprodukuje i upravlja video postavkama na web stranici. Putanja do datoteke se postavlja preko atributa src ili ugniježđena oznaka .

sintaksa:

Nekoliko elementi se mogu povezati s različitim datotekama. Pretraživač će koristiti prvi format koji pokrene.

Atributi oznake

autoplay- video se automatski pokreće nakon učitavanja stranice;

kontrole- dodaje kontrolnu tablu videu;

petlja- ponavlja video reprodukciju od početka nakon završetka;

visina- postavlja visinu područja za reprodukciju videa;

širina- postavlja širinu područja za reprodukciju videa;

preload- koristi se za preuzimanje video zapisa zajedno sa preuzimanjem web stranice;

src- određuje putanju do datoteke koja se reprodukuje.

Završna oznaka je obavezna.
Unutar kontejnera

primjer:

Primjer rezultata u pretraživaču:

Zdravo svima. Sa tobom Andrey.

U ovoj epizodi naučit ćemo kako se povezati zvuk u html stranica, tj. audio formata na vašu web stranicu.

Postoje 3 metode ugradnje zvučne datoteke.

Klikom na ovaj link automatski se pokreće standardni program za reprodukciju datoteka navedenog formata, obično Windows Media (reproducira AIFF, AU, MIDI, WAV i MP3 datoteke). Ova opcija vam je poznata, pa idemo dalje.

Sekunda način je korištenje kontejnera .

Ovaj kontejner pruža mogućnost slušanja sa kontrolama reprodukcije prikazanim direktno na web stranici, međutim, traka za kontrolu reprodukcije može izgledati drugačije u različitim pretraživačima.

Da bi se ovaj kontejner prikazao, u pretraživač mora biti instaliran poseban dodatak. U Internet Exploreru je to podrazumevano, ali što se tiče drugih pretraživača, možda ga nemaju svi. Tada će se morati instalirati.

XHTML

Parametar src je obavezan; on specificira ime datoteke koja se reproducira. Ostali parametri se mogu izostaviti. Njihova lista je data u nastavku.

ŠIRINA=n- specificira širinu konzole u pikselima.

VISINA=m- definira visinu konzole u pikselima.

AUTOSTART=TRUE|FALSE- ako je postavljeno na TRUE, reprodukcija počinje automatski.

AUTOLOAD=TRUE|FALSE- ako je postavljeno na FALSE, datoteka se ne učitava automatski.

STARTTIME="mm:ss"— reprodukcija počinje od trenutka navedenog u minutama i sekundama od početka datoteke.

PONAVLJANJE= TAČNO / NETAČNO— dozvoljava ili zabranjuje ponavljanje zvučnog/video klipa.

PLAYLOOP=Z- ako ste naveli REPEAT-TRUE, navedite ovdje umjesto Z broj ponavljanja.

VOLUME=postotak— jačina reprodukcije, određena kao procenat od maksimuma.

ALIGN="vrijednost"— poravnava upravljačku konzolu u odnosu na tekst stranice. Može biti CENTAR, OSNOVNA LINIJA GORE LIJEVO, DESNO.

CONTROLS="vrijednost"— specificira skup kontrola konzole. Može imati sljedeće vrijednosti (objašnjeno u nastavku) - KONZOLA, MALA KONZOLA, DUGME ZA PAUSU ZA PLAY, STOPBUTTON i JAČINU JAČINE.

KONZOLA- kompletan set kontrola.

SMALLCONSOLE— kompaktan prikaz konzole. Kompletan set kontrola, osim dugmeta za pauzu.

PLAYBUTTON- Samo dugme za reprodukciju.

PAUSEBUTON- samo dugme za pauzu.

STOPBUTTON- samo dugme za zaustavljanje. Fajl se zatim učitava.

VOLUMELEVER- Samo kontrola jačine zvuka.

Razumeo parametre.

Predlažem da sami pokušate primijeniti različite parametre i vidjeti kako funkcioniraju (tu nema ništa komplikovano).

Treće način je da navedete zvučnu datoteku kao pozadinski zvuk za stranicu.

Sintaksa je ovdje jednostavna:

src=ime datoteke- zvučni fajl

loor=n- broj ponavljanja (beskonačno - kontinuirano)

volumen- jačina zvuka (od 10000 do 0,0 - zadana vrijednost)

balans- balans između lijeve i desne kolone, vrijednost može varirati od -10000 (maksimalno za lijevi kanal) do 10000 (maksimalno za desni kanal).

Opis

Dodaje, reprodukuje i upravlja postavkama snimanja zvuka na web stranici. Put do datoteke je specificiran preko atributa src ili ugniježđene oznake. Unutar kontejnera

Lista kodeka koje podržavaju pretraživači je ograničena i data je u tabeli. jedan.

Tab. 1. Kodeci i pretraživači

Codec	Internet Explorer	Chrome	Opera	safari	Firefox
ogg/vorbis
wav
mp3
AAC

Za univerzalnu reprodukciju u navedenim pretraživačima, zvuk se kodira pomoću različitih kodeka i datoteke se istovremeno dodaju putem oznake .

Sintaksa

Atributi

Zvuk počinje da se reprodukuje čim se stranica učita. Dodaje kontrolnu tablu audio datoteci. Ponavlja zvuk od početka nakon što se završi. Koristi se za preuzimanje datoteke zajedno sa učitavanjem web stranice. Određuje putanju do datoteke koja se reprodukuje.

Oznaka za zatvaranje

Obavezno.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Aleksandar Klimenkov - Četrnaest

Rezultat primjera u pretraživaču Opera prikazan je na Sl. jedan.

Rice. 1. Reprodukcija audio datoteke

Pregledači

Kontrole za reprodukciju zvuka razlikuju se između pretraživača po izgledu, ali su osnovni elementi isti. To su dugme za reprodukciju/pauzu, dužina numere, proteklo i ukupno vreme reprodukcije, kao i nivo jačine zvuka.