Ranije preglednici nisu imali ugrađene mogućnosti za podršku audio i video sadržaja, no razvojem interneta podrška za multimedijske elemente kao mogućnosti modernih preglednika postala je nužnost. U HTML5 su uvedeni novi elementi

Format audio datoteke određuje strukturu i značajke prezentacije audio podataka kada su pohranjeni na medij (uređaj za pohranu). Kako bi se uklonila suvišnost audio podataka, u pravilu se koriste posebni audio kodeci, zahvaljujući kojima se audio podaci komprimiraju. Moderni preglednici podržavaju sljedeća 3 audio formata:

Preglednik	MP3	Wav	Ogg
DA	DA	DA
DA	DA	DA
Opera	DA	DA	DA
DA	DA	NE
tj	DA	NE	NE
Rub	DA	DA	NE

• MP3 format je kodek i kontejner u isto vrijeme. Široko se koristi posvuda za smještaj glazbe za preuzimanje.
• WAV format- također kodek i kontejner u isto vrijeme.
• Ogg kontejner + Vorbis audio kodek... Obično se naziva "Ogg Vorbis". Razvila ga zajednica Xiph kako bi zamijenila patentirane MP3, AAC i WMA.

MIME vrste za audio:

Format

MIME vrste
MP3	audio / mpeg
Ogg	audio / ogg
Wav	audio / wav

Podrška za preglednik

Označiti			Opera		IExplorer	Rub
	4.0	3.5	10.5	4.0	9.0	12.0

Atributi

Atribut	Značenje	Opis
auto Play	auto Play	Označava da će se zvuk automatski pokrenuti čim bude spreman.
kontrole	kontrole	Prikazuje ugrađene kontrole medijskih datoteka (gumb za reprodukciju/pauzu, klizač za skok na određeni isječak i klizač za glasnoću).
petlja	petlja	Reprodukcija datoteke u petlji (naša pjesma je dobra - počni ispočetka) ..
prigušen	prigušen	Označava da će se zvuk isključiti (nema zvuka).
predopterećenje	auto metapodataka nijedan	Određuje kako bi se audio trebao učitati pri učitavanju stranice. Atribut se zanemaruje ako je prisutan atribut autoplay.
src	Url	Određuje URL audio datoteke.

Primjer upotrebe

Element

Audio u HTML5

U ovom primjeru, mi:

Stranici je dodan audio sadržaj (oznaka

Jedna od najistaknutijih karakteristika HTML5 struji audio.

Ako se bavite područjem web razvoja, onda je izbor 10 nevjerojatnih HTML5 audio playera vrlo korisno za vas.

- audio i video player, koji je napisan čisto HTML5 i CSS... Podrška za starije preglednike je gotova Bljesak i Srebrna svjetlost igrači koji oponašaju HTML5 MediaElement API.
MediaElement ima mnogo skinova i podršku za popularne platforme: WordPress, Drupal, Joomla, itd.

Ovaj player je prilično minimalistički, ali funkcionalan. Izvrsno kada trebate popise za reprodukciju i trendi efekte!

Još jedan sjajan igrač, vjerojatno najbolji na ovoj listi. pros po tome što je vrlo lako prilagoditi i dovoljno je fleksibilan u veličini i prilagodljiv za neograničen broj boja.
Imati podrška za više preglednika, a za starije preglednike postoji Bljesak- analogno.

Vi koristite Mootools na vašoj web stranici? Ako da, onda će vam se možda svidjeti ovaj igrač napravljen na njemu HTML5 i Mootools JavaScript okvir. Player radi savršeno u svim modernim preglednicima.

Ovaj igrač je jedini s popisa koji je plaćen. On je vrijedan svega $5 ali radi savršeno. Uređaj ima mnoge korisne značajke, kao što je zaštita vašeg zvuka od prisluškivanja presnimavanje, što je vrlo dobro za komercijalnu upotrebu.

Izvor: http://codecanyon.net/item/universal-html5-audio-player

V uključene tehnologije HTML5 i Bljesakšto ga čini vrlo laganim ( 10 Kb) pouzdano rješenje za više preglednika za reprodukciju streaminga zvuka.
Želite znati što možete učiniti s Upravitelj zvukom 2? Posjetite da pogledate demo!

Opis

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

Popis kodeka koje preglednici podržavaju ograničen je i prikazan je u tablici. 1.

Tab. 1. Kodeci i preglednici

kodek	Internet Explorer	Krom	Opera	Safari	Firefox
ogg / vorbis
wav
mp3
AAC

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

Sintaksa

Atributi

Zvuk počinje reproducirati čim se stranica učita. Dodaje kontrolnu traku audio datoteci. Ponavlja zvuk od početka nakon što završi. Koristi se za učitavanje datoteke zajedno s učitavanjem web stranice. Određuje put do datoteke koja se reproducira.

Završna oznaka

Potreban.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Aleksandar Klimenkov - Četrnaest

Rezultat primjera u pregledniku Opera prikazan je na Sl. 1.

Riža. 1. Reprodukcija audio datoteke

Preglednici

Kontrole reprodukcije zvuka razlikuju se u različitim preglednicima po izgledu, ali su osnovni elementi isti. To su tipka za reprodukciju/pauzu, duljina pjesme, proteklo i ukupno vrijeme reprodukcije te razina glasnoće.

S pojavom relativno brzih internetskih veza, Flash je bio jedini alat za reprodukciju zvukova na web stranicama. Ali HTML5 će iz temelja promijeniti način na koji se zvukovi reproduciraju na internetu. U ovom članku želim vam detaljno reći kako koristiti oznaku na svojim stranicama.

Koristimo

Ispod je najjednostavniji primjer korištenja oznake, ona preuzima mp3 datoteku i reproducira je. Obratite pažnju na atribut autopalijom koji se koristi za automatsku reprodukciju zvuka. Međutim, ne biste trebali automatski reproducirati zvukove na stranici jer to nervira korisnike.

Reproduciraj zvuk u petlji

Želite ponoviti zvuk? Atribut petlje će vam pomoći u tome. Ali opet, nemojte zlorabiti autoplay i petlju ako ne želite da korisnik prerano napusti stranicu.

Prikaz kontrola

Umjesto automatskog reproduciranja zvukova, što je definitivno loša praksa, trebali biste pustiti pregledniku da prikaže neke kontrole, kao što su tipke za glasnoću i reprodukciju (pauza). To je lako učiniti jednostavnim dodavanjem atributa kontrole.

Različiti formati datoteka

Oznaku podržava većina modernih preglednika, ali problem je što različiti preglednici podržavaju različite formate datoteka. Safari, na primjer, može reproducirati MP3, ali Firefox ne može i umjesto toga reproducira OGG datoteke. Rješenje ovog problema je korištenje oba formata kako bi svaki posjetitelj mogao čuti zvuk, bez obzira koji preglednik koristi.

Određivanje MIME vrste datoteka

Kada koristite različite formate datoteka, dobra je praksa odrediti MIME tip za svaku datoteku kako biste pomogli pregledniku da lokalizira datoteku koju podržava. To se lako može učiniti pomoću atributa tip.

Za starije preglednike

Što ako posjetitelj koristi IE6 ili neki drugi pretpovijesni preglednik koji ne podržava oznaku? Sve je jednostavno: ispod je kod koji će prikazati poruku za preglednike koji ne podržavaju oznaku.

Međuspremnik datoteka

Prilikom reprodukcije velikih datoteka može se koristiti međuspremnik datoteka. Za to možete koristiti atribut predopterećenje... Može imati 3 vrijednosti:

• nijedan- ako ne želite koristiti međuspremnik datoteka;
• auto- ako želite da preglednik spremi cijelu datoteku u međuspremnik;
• metapodataka- za preuzimanje samo servisnih informacija (trajanje zvuka, itd.).

JavaScript kontrola reprodukcije

Vrlo je jednostavno kontrolirati HTML5 audio player putem JavaScripta. Sljedeći primjer pokazuje kako možete izgraditi svoje osnovne kontrole audio playera pomoću JavaScripta:

To je sve za danas.
Nadamo se da vam je ovaj članak pomogao razumjeti osnovne mogućnosti HTML5 oznaka. .

Ovo se pitanje javlja vrlo često, pa sam odlučio posvetiti mu poseban članak u lekcijama. Budući da HTML nema univerzalnu tehnologiju za reprodukciju zvuka za sve preglednike, za rješavanje ovog problema predlažem preuzimanje datoteke audio playera, kao što se radi na većini web-mjesta. Sve radimo u koracima:

1. Na hostingu, gdje se nalazi vaša stranica, u korijenskom direktoriju (mapa u kojoj se nalazi indeksna datoteka), stvorite audio mapu. U budućnosti ćete u njega smjestiti sve audio datoteke.

3. Sada odaberite datoteke koje želite, po mogućnosti u mp3 formatu. Stvorite mapu audio u korijenu stranice i prenesite ih.

4. Ostaje samo umetnuti kod za povezivanje igrača. Pogodan je za bilo koju stranicu Na pravom mjestu, samo trebate odrediti put do datoteke playera i audio datoteke, zamjenjujući riječi u skladu s tim vaša_domena i audio_file_name:

I gotovi ste! Također možete vidjeti rad primjer.

Kako postaviti pozadinsku glazbu u html-u

Koristeći mogućnosti HTML-a i preglednika, također možete umetnuti pozadinsku glazbu na stranicu. Trebat će vam audio datoteka ispravnog formata: WAV, AU, MIDI ili MP3. Kao primjer možete koristiti bilo koju datoteku s navedenim nastavkom.

Prvi način je oznaka za ugrađivanje. Element embed koristi se za učitavanje i prikaz objekata (na primjer, video datoteke, flash filmovi, neke zvučne datoteke itd.) koje preglednik izvorno ne razumije.

Sintaksa je prilično jednostavna:

Nije potrebna završna oznaka.

Pogledajmo sada primjer zapisa s atributima, a u nastavku s njihovim dekodiranjem:

Ugradite atribute oznake za reprodukciju zvuka u html
širina - širina ploče u pikselima (ili postocima)
visina - visina ploče u pikselima (ili postocima)
poravnati - položaj ploče u odnosu na tekst, moguće vrijednosti su lijevo, desno, središte
hidden - omogućuje vam da sakrijete ploču, vrijednosti atributa: true - ploča je skrivena, false - ploča je vidljiva (zadana vrijednost)
autostart - vrijednost true - player se automatski pokreće kada se stranica učita, false - čeka da se pritisne gumb za reprodukciju
loop - petlja, true - pjesma se reproducira u krug, a ako je lažna - samo jednom

Drugi način. Vrlo staro, ali i praktično) Dodajte melodiju u istu mapu (direktorij) u kojoj se nalazi vaša datoteka, a u tijelo upišite sljedeći kod:

Kao rezultat toga, nakon učitavanja stranice, oglasit će se melodija koju ste naveli u oznaci bgsound. Pogledajmo sada pobliže atribute oznake. :

src- put do vaše audio datoteke
petlja- koliko puta se melodija ponavlja (ako je -1, onda se ponavlja beskonačno)
ravnoteža- vrijednost stereo balansa (od -10000 do 10000)
volumen- glasnoća melodije, gdje je 0 maksimum, a -10000 minimum.

Međutim, neće biti moguće kontrolirati player na bilo koji način - svaki put kada se stranica osvježi, pjesma će se ponovno reproducirati.

Nakon što sam opisao način umetanja pozadinske glazbe, želim vas odvratiti od toga, budući da većina korisnika u trenutku posjeta raznim stranicama već u pravilu sluša glazbu. Stoga ga prateća glazba može samo natjerati da zatvori karticu sa stranicom.

Umetnite audio i glazbu u HTML5 - audio tag

audio- uparena oznaka koja definira pozadinski zvuk, glazbu ili drugi audio stream na web mjestu.

Atributi audio oznake

auto Play- datoteka se reproducira odmah kada se stranica učita (slično bgsound pozadinskoj glazbi)
kontrole- prikaz upravljačke ploče playera u pregledniku
petlja- ponovno reproducira datoteku nakon njenog završetka
predopterećenje- preuzimanje audio datoteke odvijat će se zajedno s učitavanjem stranice
src- put do audio datoteke (mp3 ili ogg)

Uzorak koda s audio oznakom

Audio u HTML 5