Kako umetnuti audio zapis u html. Audio s interneta spremamo u datoteke. Kako postaviti pozadinsku glazbu u html

Bok svima. Ovo je Andrej.

U ovoj epizodi ćemo naučiti kako se povezati zvuk u HTML stranica, tj. audio datoteke za vašu web stranicu.

Postoje 3 metode ugradnje zvučne datoteke.

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

Drugi način je korištenje kontejnera .

Ovaj vam spremnik omogućuje slušanje pomoću alata za reprodukciju prikazanih izravno na web stranici, međutim, upravljačka ploča za reprodukciju može izgledati drugačije u različitim preglednicima.

Kako bi se ovaj spremnik prikazao, u preglednik mora biti instaliran poseban dodatak. U Internet Explorer to je zadano, ali što se tiče drugih preglednika, možda ga nemaju svi. Zatim ćete ga morati instalirati.

XHTML

Parametar src je obavezan i navodi naziv datoteke koja se reproducira. Ostali parametri ne smiju biti navedeni. Njihov popis je dat u nastavku.

ŠIRINA=n— definira širinu konzole u pikselima.

VISINA=m— definira visinu konzole u pikselima.

AUTOSTART=TRUE|FALSE— ako je TRUE, reprodukcija počinje automatski.

AUTOLOAD=TRUE|FALSE- ako ima vrijednost FALSE, datoteka se ne preuzima automatski.

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

PONAVLJANJE= TOČNO/NETOČNO— dopušta ili zabranjuje ponavljanje audio/video zapisa.

PLAY LOOP=Z— ako ste naveli REPEAT-TRUE, ovdje navedite broj ponavljanja umjesto Z.

VOLUME=postotak— glasnoća reprodukcije, naznačena kao postotak maksimuma.

ALIGN="vrijednost"— poravnava upravljačku konzolu u odnosu na tekst stranice. Može imati vrijednosti CENTER, BASELINE GORE LIJEVO, DESNO.

CONTROLS="vrijednost"— specificira skup kontrola konzole. Može imati sljedeće vrijednosti (objašnjeno u nastavku) - CONSOLE, SMALLCONSOLE, PLAYBUTTON PAUSEBUTTON, STOPBUTTON I VOLUMELEVER.

KONZOLA— kompletan skup kontrola.

MALA KONZOLA— kompaktan prikaz konzole. Kompletan skup kontrola osim gumba za pauzu.

GUMB ZA REPRODUKCIJU- Samo gumb za reprodukciju.

GUMB ZA PAUZU- samo gumb za pauzu.

STOP TIPKA- samo gumb za zaustavljanje. Datoteka se zatim preuzima.

VOLUMELEVER- samo kontrola glasnoće.

Odredili smo parametre.

Predlažem da sami pokušate primijeniti različite parametre i vidite kako rade (ovdje nema ništa komplicirano).

Treći Način je navesti zvučnu datoteku kao pozadinski zvuk za stranicu.

Sintaksa je ovdje jednostavna:

src=ime datoteke- zvučna datoteka

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

volumen- volumen (od 10000 do 0,0 - zadana vrijednost)

ravnoteža- balans između lijevog i desnog zvučnika, vrijednost može varirati od -10000 (maksimalno za lijevi kanal) do 10000 (maksimum za desni kanal).

Već smo govorili o upotrebi HTML5 i zašto je on danas relevantan. Pogledajmo sada pobliže pitanje "Kako umetnuti zvuk na web mjesto pomoću HTML5."

Možete dodati glazbu na stranicu pomoću oznake audio. Primjer najjednostavnije implementacije ove oznake:

Ali opet, kao i s videom, nije tako jednostavno. Ne podržavaju svi preglednici potrebne audio kodeke. Pogledajmo tablicu:

preglednikGoogle ChromeMozilla FirefoxSafariOperaInternet Explorer
mp3 Jesti Ne Jesti Ne Jesti
wav Jesti Jesti Jesti Jesti Ne
A.A.C. Jesti Ne Jesti Ne Jesti
ogg/vorbis Jesti Jesti Ne Jesti Ne

Kao što se može vidjeti iz tablice, najuniverzalniji format je .wav. Međutim, Internet Explorer to ne podržava. Stoga se preporuča pretvoriti audio datoteku u nekoliko formata i koristiti nekoliko audio kodeka. Sljedeći primjer ilustrira jedan način dodavanja HTML zvuka na web stranicu:

Izgled audio playera ovisit će o pregledniku, evo, na primjer, izgleda audio playera u Firefox pregledniku:

Atributi oznake AUDIO

Na atribute glavne oznake audio odnositi se:

  • src- put do audiodatoteke (može se posebno navesti pomoću ugrađene oznake izvor);
  • kontrole- prikazuje se audio upravljačka ploča (reprodukcija, pauza, glasnoća itd.);
  • auto Play- reproducira audio datoteku odmah nakon učitavanja web stranice;
  • petlja- ciklička reprodukcija;

Ugniježđena oznaka izvor može imati sljedeće atribute:

  • src- put do audio datoteke;
  • tip- vrsta audio izvora;
  • medijima- tip uređaja na kojem će se audio datoteka reproducirati (all - na svim uređajima, tv - televizija itd.);

Zašto vam je potrebna glazba na stranici?

Prilično zanimljivo pitanje: reprodukcija glazbe ili glasovnih datoteka na web-mjestu ili ugrađeni player pomaže posjetiteljima web-mjesta da se opuste, izaziva pozitivne emocije i stavlja ih u pravo raspoloženje, da tako kažem, olakšava interakciju s web-mjestom. Ali ovi efekti rade samo ako je glazba na web mjestu ispravno odabrana i glasnoća zvuka ne prelazi prihvatljive granice, inače će svi vaši napori biti uzaludni i izazvat će negativne emocije među posjetiteljima web mjesta.

Kako umetnuti audio (glazbu) na web stranicu u html-u?

Često nam postavljaju ovo pitanje; glazba na web stranici je relevantan i kreativan element, a postoji mnogo načina da je pustite i nije ih teško implementirati. Počnimo s činjenicom da svaki korisnik Globalne mreže koristi neku vrstu preglednika za pristup internetu, a ne postoji opća i univerzalna tehnologija za reprodukciju zvučnih i glazbenih datoteka, svaki preglednik radi prema svojim algoritmima i oni su nešto drugačiji jedni od drugih, tako da prilikom reprodukcije glazbe s Ugrađivanjem u HTML kod stranice mogu nastati problemi. Ali kao što znate, svi se problemi mogu riješiti!

Umetnite glazbu na web stranicu HTML, JavaScript, jQuery, AJAX načine:

1 način.

Stvaranje audio glazbenog playera na web stranici ili playeru

Tehnologija je jednostavna, datoteka playera se kreira tako da ne opterećuje stranicu ili server, odabiremo tehnologiju koju ćemo koristiti: JavaScript, jQuery, AJAX. Na temelju odabrane tehnologije razvijamo skriptu za našu stranicu i ubacujemo je u stranicu. Skripta se kreira ovisno o tome što vam je potrebno: automatska reprodukcija pozadinske glazbe na stranici ili player kojim upravlja posjetitelj. Zatim stvorite mapu u korijenu stranice za glazbu i prenesite audio datoteke u nju.

Ili, kao alternativnu metodu, možete stvoriti player koristeći Flash tehnologiju; takav player će izgledati impresivnije. Istina će biti skuplji i teži za stranicu (povećat će vrijeme učitavanja stranica stranice).

Metoda 2.

Instaliranje glazbe na web stranicu pomoću HTML-a

Koristeći mogućnosti HTML-a i preglednika, možete umetnuti player ili pozadinsku glazbu na stranicu. Tehnologija je jednako jednostavna: kreira se HTML5 kod s oznakom “audio” i taj se kod upisuje na stranicu, a kada korisnik posjeti stranicu, vidi minimiziran player, posjetitelj automatski pritisne gumb za reprodukciju ili pozadinsku glazbu počinje svirati. Izgled playera ovisit će o pregledniku s kojeg je posjetitelj došao, no funkcionalnost će ostati standardna: tipke za reprodukciju, zaustavljanje, sljedeće, prethodno, glasnoću. Player s HTML kodom izgleda ovako:

Sam ugrađeni kod izgleda ovako:

Kao što ste možda primijetili, naredba "controls autoplay" omogućuje automatsku reprodukciju glazbe čim posjetitelj uđe na stranicu.

Alternativna verzija HTML koda je oznaka "bgsound", koja uopće ne koristi vizualni player; kada posjetite stranicu, glazba na stranici će početi svirati, ali možete prilagoditi glasnoću, pauzirati itd. korisnik neće moći. Postavka glasnoće reprodukcije audio datoteke konfigurirana je u samom kodu.

Formati zvučnih datoteka za reprodukciju glazbe na stranici mogu biti: WAV, AU, MIDI, MP3, OGG (ekstenzije). Glazbene datoteke se učitavaju na web mjesto ili se koriste poveznice na ona mjesta na kojima se zvučna datoteka nalazi, glavna stvar je da je u javnoj domeni.

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

Stvoren je nevjerojatan broj uslužnih programa za preuzimanje streaming sadržaja s interneta - neki od njih su univerzalni, drugi su "prilagođeni" za određene usluge. Neki programi dobivaju pristup izvornim audio i video datotekama i jednostavno ih čitaju bajt po bajt s interneta, dok neki mogu preuzimati datoteke, učitavati datoteke u više tokova, raditi s grupama datoteka itd. Opis toka može biti xml datoteku u formatu ASX (za Windows Media Player) ili pohranjenu u datoteke formata RealAudio (ekstenzije .ra i .rm - za audio, .rv - za video), itd. Takvi se streamovi isporučuju ne samo putem standardnih protokola http , udb / tcp, ali i putem posebnih - rtsp, mms, rtp, kao i putem peer-to-peer tehnologija koje se koriste, primjerice, u tako popularnom servisu internetske televizije kao što je SopCast. Naravno, za reprodukciju ovih formata potreban vam je odgovarajući klijent - recimo Windows Media Player, VLC media player itd. Potonji, usput, ne samo da može reproducirati streaming sadržaj, već ga i spremiti na lokalne diskove. To je ono što ćemo mi koristiti, jer je većina resursa prilično teška za njega.

Dakle, da biste snimili online radijski program ili posebno podcast, prvo morate dobiti vezu na sadržaj za strujanje, a zatim je unijeti u VLC player. Ako web mjesto koristi Windows Media Player za reprodukciju zvuka, doći do veze bit će lako. Morate desnom tipkom miša kliknuti player ugrađen u stranicu stranice i odabrati "Svojstva". U polju "Lokacija" pronađite adresu i kopirajte je u međuspremnik. Ako web mjesto koristi Flash player ili player razvijen na temelju HTML5, tada je vjerojatno da ćete morati preturati po izvornom kodu stranice ili se obratiti posebnim uslužnim programima da biste "istrgnuli" veze.

Sljedeći korak je pretvaranje strujanja zvuka. Možda ne možete reći da je ova operacija u VLC-u jednostavna i očita. Naprotiv, glomazan je i zbunjujući. Korištenjem naredbe izbornika “Media Open URL” sadržaj strujanja može se zapisati u datoteku. Prema zadanim postavkama, VLC je konfiguriran za reprodukciju veze, a da biste je spremili u datoteku, trebate promijeniti način rada u "Pretvori" u dijaloškom okviru koji se otvori. Dijalog će se promijeniti - ciljna datoteka je naznačena u novom prozoru i odabran je profil (tj. format u kojem će snimka biti spremljena). Nakon klika na gumb "Start", player počinje kopirati streaming zvuk u datoteku. On to čini potpuno neprimjetno i, u principu, može pisati koliko god želi - ovaj proces morat će se samostalno kontrolirati. Imajte na umu da kada zaustavite i nastavite proces konverzije, rezultirajuća datoteka se vraća na nulu. Stoga morate preimenovati prethodno spremljene datoteke.

Sasvim je očito da je ponavljanje takve operacije svaki put vrlo problematično. Pogotovo ako trebate pisati različite teme u različito vrijeme. VLC player nudi jednostavan alat za planirano preuzimanje pod nazivom VLC Configurator. Označava što i gdje pisati (ovi parametri se konfiguriraju na isti način kao što je gore opisano) i koliko dugo. Na primjer, ako svaki dan trebate snimati određeni program internetskog radija, trebali biste postaviti opcije "Ponavljanje" i "Interval između ponavljanja" u dijaloškom okviru. Sada, nakon pokretanja, program će samostalno pretvoriti streaming sadržaj.

Usput, VLC će također pomoći pri pretvaranju tokova, na primjer, ASF datoteka u MP3, što je poznatije i razumljivije džepnim igračima. Ova se operacija može obaviti ručno, pretvarajući lokalnu datoteku svaki put ili automatski pomoću jednostavne skripte Powershell, koja je, kao što znate, uključena u Windows 7 i dostupna je u ranijim verzijama ovog operativnog sustava. Skripti se prosljeđuje nekoliko parametara - put do datoteka, maska ​​datoteke i, po izboru, rezultirajuća mapa u kojoj su datoteke pohranjene (ako nije navedeno, datoteke se zapisuju u izvorni direktorij). Unutar petlje poziva se VLC program kojemu se šalju parametri: što kodirati, gdje pisati i stvarni parametri kodiranja. Nakon što je kodiranje završeno, VLC se učitava iz RAM-a. To možete provjeriti posljednjom konstrukcijom, koja čeka da se proces učita iz memorije. Takvu skriptu možete unijeti u bilo koji uređivač teksta - bilježnicu ili poseban "vizualni" uređivač Powershell ISE. Ako ga spremite u datoteku, na primjer convert.ps1, tada se pokreće s konstrukcijom poput:

. convert.ps1 c:  datoteke  glazba *.asf.

Zaključno, vrijedi napomenuti još nekoliko značajki skripte. Operativni sustav Windows ne navodi automatski staze do programa, tako da skripta također mora navesti stazu do vlc.exe: u 64-bitnoj verziji - C: 'Program Files (x86)'  VideoLAN  VLC (imajte na umu da su reci s razmacima u navodnicima) i u 32-bitnom - C:  'Program Files'  VideoLAN  VLC  . Također, trebali biste provjeriti jeste li napustili VLC program prije pokretanja skripte, inače će se metoda waitforexit() izvoditi neograničeno (zbog činjenice da će program pozvan u skripti izaći, ali će njegova kopija ostati). Naravno, također je moguće obraditi identifikatore procesa u skripti, ali takva mogućnost samo će to zakomplicirati. Da biste riješili ovaj problem, trebali biste jednostavno dodati prisilno prekidanje svih pokrenutih VLC-ova na početak skripte: ps vlc* | %($_.kill()). Još jedna značajka povezana je sa sigurnosnim sustavom Windows 7, koji zahtijeva da sve skripte budu potpisane. Naredba Set-ExecutionPolicy RemoteSigned može vam pomoći da zaobiđete ovo ograničenje; trebate je pokrenuti u Powershellu kao administrator.

Skripta convert.ps1 na Powershellu za pretvaranje strujanja sadržaja u MP3

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

ls -staza $ulazni put  $zamjenski znak | % (

pisanje-host $outputfile

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

Izdvajanje zvuka iz FLV videa

Još jedan primjer korištenja VLC-a i Powershell-a zajedno je izdvajanje zvuka iz Flash videa u FLV formatu. Takvi videoisječci pohranjuju se na specijaliziranim portalima, poput poznatog YouTubea. Naravno, Google i drugi vlasnici video hostinga daju sve od sebe kako bi spriječili preuzimanje sadržaja, ali uvijek će biti načina 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 preuzete bilo kojom poznatom metodom kako bi je, na primjer, slušali u džepnom playeru. Takva operacija sasvim je unutar mogućnosti VLC-a, kako u GUI-ju tako i iz naredbenog retka. Usput, u prvom slučaju trebate učiniti gotovo isti skup radnji kao i prije: odaberite naredbu "Mediji - Pretvori/Spremi" s izbornika, odredite izvorne i rezultatske datoteke, kao i parametre konverzije, tj. odgovarajući kodek.

Da biste izvršili ručnu konverziju pomoću Powershell-a, trebate, kao i prije, konstruirati malu skriptu (nazovimo je flv2mp.ps1), u koju se šalju nazivi izvorne i odredišne ​​mape (prema zadanim postavkama isto kao izvor). Cijeli njegov trik leži u proslijeđenim parametrima: budući da video nije potreban, trebali biste koristiti dummy parametar, definirati parametre datoteke u standardnom bloku, a kako vas skripta ne bi gnjavila skočnim prozorima, jednostavno ih blokirajte s opcijom –dummy-quiet –sout.

param($inputpath, $outputpath = $inputpath)

ls -put $ulazniput  *.flv | % (

$outputfile = put pridruživanja $outputpath($_.name.replace($_.extension, '.mp3'))

pisanje-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())

Glazba na stranici više je rijetkost nego uobičajena. Kada ubacujete glazbu na web mjesto, morate razumjeti da neke korisnike to može potpuno isključiti. U ovom ćemo članku pogledati nekoliko opcija za umetanje glazbe na web stranicu, a također ćemo pogledati kako napraviti pozadinsku glazbu.

Kako umetnuti pozadinsku glazbu na web stranicu

Umetanje pozadinske glazbe na web stranicu najopasnija je opcija u smislu gubitka posjetitelja. Jer pozadinska glazba ne samo da se ne može isključiti, nego joj se ni na koji način ne može podesiti glasnoća (sve ovisi o trenutnoj glasnoći na računalu). Stoga morate sto puta razmisliti prije nego ubacite pozadinsku glazbu.

Postoje dva načina za umetanje glazbe u html

Opcija 1. Preko html oznake

Sintaksa za umetanje pozadinske glazbe

Na oznaci postoji nekoliko atributa:

  • loop="value" - broj ponavljanja glazbe (ako je -1, onda se ponavlja beskrajno)
  • balance="value" - stereo balans (od -10000 do 10000)
  • volumen="vrijednost" - volumen (0 maksimum, -10000 minimum)

Glazba će se automatski reproducirati kada se stranica učita.

Na primjer

Opcija 2. Kroz oznaku

Sintaksa za umetanje objekta s glazbom

Na oznaci Mogu se koristiti sljedeći atributi:

  • width="value" - širina (u pikselima ili postocima)
  • visina="vrijednost" - visina (u pikselima ili postocima)
  • align="value" - poravnanje (lijevo - lijevo, desno - desno, centar - centar)
  • skriven="vrijednost" - vidljivost panela (true - sakriti, false - pokazati), prema zadanim postavkama panel je vidljiv
  • autostart="value" - pušta glazbu prilikom učitavanja (true - da, false - ne)
  • loop="value" - vrijednost true - igrati u krug, false - jednom

Na primjer

Standardni player će izgledati drugačije za svaki preglednik, tako da nećemo razmatrati svaki od njih zasebno.

U html5 možete koristiti oznaku

Značenje korištenja oznake

Sintaksa oznake

Mogu se koristiti sljedeći atributi:

  • autoplay="value" - uključite glazbu odmah kada se stranica učita
  • controls="value" - prikaz upravljačke ploče igrača u pregledniku
  • loop="value" - odgovoran za cikličnost
  • preload="value" - učitaj glazbu odmah kada se stranica učita

Razmotrene opcije, po mom mišljenju, nisu idealna rješenja, budući da se sve temelje na standardnim igračima. Svaki preglednik će imati svoj zadani player, a u nekima možda uopće neće raditi. Stoga je najbolje preuzeti player na svoju web stranicu i s njega preuzeti glazbu. Takav player će imati funkcije za zaustavljanje, podešavanje glasnoće itd. - svi potreban set za običnog korisnika.