Audio player na html web stranici. Ovladavanje HTML5 audio oznakom. Umetanje zvuka i glazbe u HTML5 - audio tag

Dodaje, reproducira i upravlja audio postavkama na web stranici. Put do datoteke naveden je putem atributa src ili subtag-a. Unutar spremnika možete napisati tekst koji će biti prikazan u preglednicima koji ne rade s ovom oznakom.

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

Za univerzalnu reprodukciju u određenim preglednicima, zvuk se kodira pomoću različitih kodeka, a datoteke se dodaju istovremeno putem oznake.

Potreban.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Aleksandar Klimenkov - Četrnaest

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

Riža. 1. Reproducirajte audio datoteku

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

Prije preglednici nisu imali ugrađene mogućnosti podrške audio i video sadržaja, no s razvojem interneta podrška za multimedijske elemente kao značajka modernih preglednika postala je nužnost. HTML5 je uveo nove elemente i , koji su podržani u svim modernim preglednicima. Glavna svrha oznake je dodavanje audio sadržaja na stranicu.

Format audio datoteke određuje strukturu i značajke prezentacije audio podataka kada su pohranjeni na mediju za pohranu (uređaj za pohranu). Kako bi se uklonila redundancija 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:

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

MIME vrste za audio:

Element koristi iste atribute kao i element, osim atributa širine, visine i postera (slika koja se prikazuje prije reprodukcije videozapisa). Slično korištenju elementa, pomoću elementa možete pružiti više opcija audio formata, kao što je prikazano u primjeru u nastavku:

preuzimanje datoteka

U ovom primjeru mi:

Dodali smo audio sadržaj (oznaku) na stranicu i dodali atribut kontrole za prikaz ugrađenih kontrola za multimedijsku datoteku (gumb za reprodukciju/pauzu, klizač koji vam omogućuje odlazak na određeni fragment videa, kao i kontrola glasnoće).

Jedna od najistaknutijih značajki HTML5 struji zvuk.

Ako se bavite web razvojem, onda će vam ova zbirka od 10 nevjerojatnih HTML5 audio playera dobro doći.

- audio i video player, koji je napisan u čistom obliku HTML5 I CSS. Podrška za starije preglednike vrši se korištenjem Bljesak I Silverlight igrači koji imitiraju HTML5 MediaElement API.
MediaElement ima mnogo dizajna i podršku za popularne platforme: WordPress, Drupal, Joomla, itd.

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

Još jedan sjajan igrač, možda i najbolji na cijeloj listi. profesionalci je da ga je vrlo lako postaviti i da je prilično fleksibilan u veličini i prilagodljiv neograničenom broju boja.
U podrška za više preglednika, a za starije preglednike postoji Bljesak-analog.

Vi koristite Mootools na vašoj web stranici? Ako da, onda bi vam se mogao svidjeti ovaj player, napravljen na HTML5 I Mootools JavaScript okvir. Player radi savršeno u svim modernim preglednicima.

Ovaj igrač je jedini na listi koji je plaćen. Košta samo 5 dolara, ali radi savršeno. Igrač ima mnogo korisne funkcije, na primjer, štiteći vaš zvuk od presretanja pomoću preklapanja signala, što je vrlo dobro za komercijalnu upotrebu.

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

U uključene tehnologije HTML5 I Bljesak, što ga čini vrlo laganim (10 KB) robusnim rješenjem za više preglednika za strujanje zvuka.
Želite li znati s čime možete Upravitelj zvuka 2? Posjetite da biste pogledali demo!

HTML5 audio pruža poboljšane mogućnosti za rad sa audio sadržajem. Sve donedavno, jedini način za dodavanje zvučnih datoteka na web-stranice bio je integracija pozadinskog zvuka pomoću oznake koja bi se reproducirala dok bi korisnik pregledavao stranicu, bez mogućnosti isključivanja.

Zahvaljujući dodatku novog elementa u HTML5 specifikaciju, sada je moguće dodati audio sadržaj s ugrađenim softversko sučelje bez korištenja dodataka.

IE: 9,0
Firefox: 3.5 osnovna podrška, 15.0 puna podrška
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: -
Android preglednik: 4.1
Chrome za Android: 44

HTML5 element koristi se za ugradnju audio sadržaja na web stranice. U opći pogled HTML označavanje izgleda ovako:

Atribut kontrole dodaje preglednike za prikaz sučelja upravljanja audio playerom - tipke za reprodukciju, pauzu, glasnoću.

Trenutačno ne postoji audioformat koji radi u svim preglednicima, pa se preporučuje da uključite višestruke audioizvore predstavljene pomoću atributa src elementa kako biste osigurali da je sadržaj dostupan najširoj mogućoj publici. U isto vrijeme možete dodati rezervni sadržaj za preglednike koji ne podržavaju element.

Download name.mp3

Audio kodek (dekoder) je program za pretvaranje digitalnih podataka u format audio datoteke ili audio toka. Popularni audio formati su:

MP3 je najpopularniji audio format koji koristi kompresiju s gubitkom i omogućuje nekoliko puta smanjenje veličine datoteke. Zbog naknada za licenciranje, Firefox i Opera nisu podržani.

A.A.C. (Napredni audio kodek)- zatvoreni kodek, analogan MP3, ali u usporedbi s potonjim, podržava više visoka kvaliteta zvuk sa sličnom veličinom datoteke.

Ogg Vorbis je besplatni format sa otvoreni izvor, podržan u Firefoxu, Operi i Chromeu. Pruža dobra kvaliteta zvuk, ali nije široko podržan od hardverskih playera.

Element se koristi za dodavanje više medijskih izvora za i . Označava alternativne video/audio datoteke koje preglednik može odabrati na temelju podržane vrste medija ili kodeka.

Element se koristi kao element djeteta i . Dodaje tekstualni zapis za titlove, medijske naslove ili druge tekstualne informacije koje bi trebale biti vidljive dok se audio ili video datoteka reproducira.

Korištenjem CSS stilova svom audio playeru možete dati neobičan izgled. Reprodukcija se kontrolira pomoću male skripte (pomoću jQuery knjižnice), zvuk se pojavljuje kada prijeđete pokazivačem iznad zapisa.

1. Na hostingu na kojem se nalazi vaša stranica, u korijenskom direktoriju (mapi u kojoj se nalazi indeksna datoteka), kreirajte audio mapu. Ubuduće ćete u njega smjestiti sve audio datoteke.

3. Sada odaberite potrebne datoteke, bolje u mp3 formatu. Napravite audio mapu u korijenu stranice i prenesite ih.

4. Ostaje samo umetnuti kod za povezivanje igrača. Pogodan je za bilo koje mjesto, samo trebate naznačiti put do datoteke playera i audio datoteke, odnosno zamijeniti riječi vaša_domena i audio_datoteka:

I sve je spremno! Također možete pogledati radni primjer.

Prvi način je embed tag. Element embed koristi se za učitavanje i prikaz objekata (na primjer, video datoteka, flash filmova, nekih audio datoteka itd.) koje preglednik inicijalno ne razumije.

Sintaksa je prilično jednostavna:

Završna oznaka nije potrebna.

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

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

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

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

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)
glasnoća - glasnoća reprodukcije melodije, gdje je 0 maksimum, a -10000 minimum.

Međutim, neće biti načina da se na bilo koji način kontrolira player - svaki put kad se stranica osvježi, pjesma će se ponovno reproducirati.

Nakon što sam opisao način umetanja pozadinske glazbe, želim vas odgovoriti od toga, jer većina korisnika u pravilu već sluša glazbu kada posjećuju razne stranice. Stoga ga popratna glazba može samo natjerati da zatvori karticu sa stranicom.

Atributi audio oznaka

autoplay - datoteka se reproducira odmah nakon učitavanja stranice (slično kao pozadinska glazba bgsound)
kontrole - prikaz upravljačke ploče igrača u pregledniku
petlja - ponovno reproducira datoteku nakon što završi
preload - audio datoteka će se učitati zajedno s učitavanjem stranice
src - put do audio datoteke (mp3 ili ogg)

Primjer koda s audio oznakom

Audio oznaka

Audio u HTML 5