Kuinka tallentaa suoratoistoääntä. Erilaisia ​​tiedostomuotoja

Tervehdys ystävät! Tässä videossa jatkamme keskustelua objektien lisäämisestä HTML-dokumenttiin.

Kun skripti on yhdistetty, meidän on lisättävä vielä yksi komentosarja itse soittimen kuoren yhdistämiseksi ja määritettävä soittimen parametrit:

Tämä skripti on myös kirjoitettava ennen sulkevaa tunnistetta. ... On syytä huomata, että tässä olemme määrittäneet leveyden, äänenvoimakkuuden, joka asetetaan automaattisesti toiston aikana, ja muut parametrit, joita voimme muuttaa harkintamme mukaan.

Kun skriptit on yhdistetty, meidän on lisättävä se musiikillinen sävellys sivulle, jotta sitä voi kuunnella. Tätä varten käytämme kappaletunnisteita, joiden sisään voimme jättää tietoja, jotka näkyvät, jos soitin ei näy. Yhdistetään vielä yksi skripti, joka osoittaa soittimen tunnuksen ja polun musiikkitiedostoon. Se näyttää suunnilleen tältä:

Musiikki

On myös syytä kiinnittää huomiota tunnukseen, jota käytetään soittimen näyttämiseen. Huomaa, että jos haluamme lisätä sivulle useamman kuin yhden sävellyksen, meidän on rekisteröitävä uusi tunnus jokaiselle tiedostolle. Esimerkiksi, jos haluat lisätä toisen tiedoston, muutamme ID:tä hieman, esimerkiksi näin:

Musiikki

No siinä on periaatteessa kaikki. Tiedämme nyt kuinka lisätä ääntä HTML-dokumenttiin. Muitakin tapoja on tietysti. Mutta mielestäni tämä vaihtoehto riittää meidän tapauksessamme.

Video-opastus: Kuinka lisätä ääntä HTML-dokumenttiin?

HTML-viitteet ja muut materiaalit voidaan ja pitää ladata!

Miksi tarvitset musiikkia sivustolle?

Tarpeeksi kiinnostusta Kysy, soittaa musiikkia tai äänitiedostot sivustolla tai sisäänrakennettu soitin auttaa sivuston kävijöitä rentoutumaan, syitä positiivisia tunteita ja mukautuu haluttuun tunnelmaan, niin sanotusti, helpottaa vuorovaikutusta sivuston kanssa. Mutta nämä tehosteet toimivat vain, jos sivuston musiikki on valittu oikein ja äänenvoimakkuus ei ylitä sallittuja rajoja, muuten kaikki yrityksesi ovat turhia ja aiheuttavat negatiivisia tunteita sivuston vierailijoilta.

Kuinka upottaa ääntä (musiikkia) verkkosivustolle html-muodossa?

Meiltä kysytään usein tämä kysymys, sivustolla oleva musiikki on relevantti ja luova elementti, ja sen toistamiseen on monia tapoja, eikä niitä ole niin vaikea toteuttaa. Aluksi jokainen käyttäjä Maailmanlaajuinen verkosto käyttää Internet-selainta, mutta yleistä ja universaalia tekniikkaa ääni- ja musiikkitiedostojen toistamiseen ei ole olemassa, jokainen selain toimii omien algoritmiensa mukaan ja ne eroavat hieman toisistaan, joten soitettaessa musiikkia upottamalla sivun HTML koodi, ongelmia voi ilmetä... Mutta kuten tiedät, kaikki ongelmat voidaan ratkaista!

Upota musiikkia verkkosivustollesi HTML-, JavaScript-, jQuery- tai AJAX-tavoilla:

Äänisoittimen luominen sivustomusiikille tai -soittimelle

Tekniikka on yksinkertainen, soitintiedosto luodaan siten, että se ei lataa sivustoa tai palvelinta, valitsemme käyttämämme tekniikan: JavaScript, jQuery, AJAX... Valitun tekniikan perusteella kehitämme sivustollemme skriptin ja lisäämme sen sivustolle. Käsikirjoitus luodaan riippuen siitä, mitä tarvitset: taustamusiikin automaattinen toisto sivustolla tai vierailijan ohjaama soitin. Luo seuraavaksi sivuston juureen kansio musiikille ja lataa siihen äänitiedostoja.

Tai vaihtoehtoisena sopsobina voit luoda soittimen flash-tekniikalla (Flash), tällainen soitin näyttää vaikuttavammalta. Totuus tulee kalliimmaksi ja sivustolle vaikeammaksi (se lisää sivuston sivujen latausaikaa).

Menetelmä 2.

Musiikin asentaminen sivustolle HTML:n avulla

HTML:n ja selaimen ominaisuuksien avulla voit lisätä soittimen tai taustamusiikkia sivustolle. Tekniikka on yhtä yksinkertainen: HTML5-koodi luodaan "audio"-tunnisteella ja tämä koodi kirjoitetaan sivustolle, ja kun käyttäjä vierailee sivustolla, hän näkee pienennetyn soittimen, vierailija napsauttaa toistopainiketta tai aloittaa automaattisesti toiston. taustamusiikki... Soittimen tyyppi riippuu selaimesta, josta kävijä tuli, mutta toiminnot pysyvät vakiona: Toista, Pysäytä, Seuraava, Edellinen, Äänenvoimakkuus. HTML-koodilla varustettu soitin näyttää tältä:

Varsinainen upotuskoodi näyttää tältä:

Kuten olet ehkä huomannut, "controls autoplay" -komento mahdollistaa musiikin automaattisen toiston heti, kun vierailija tulee sivustolle.

Vaihtoehtoinen versio HTML-koodista on "bgsound" -tunniste, tämä ei tarkoita visuaalisen soitinten käyttämistä ollenkaan, kun vierailet sivustolla, sivustolla oleva musiikki alkaa soida, mutta säädä äänenvoimakkuutta, keskeytä jne. käyttäjä ei pysty siihen. Äänitiedoston toiston äänenvoimakkuuden asettaminen on määritetty itse koodissa.

Äänitiedostomuodot musiikin toistamiseen sivustolla voivat olla: WAV, AU, MIDI, MP3, OGG (laajennukset). Musiikkitiedostot ladataan sivustolle tai käytetään linkkejä niille sivustoille, joissa äänitiedosto, tärkeintä on, että se on julkista.

HTML5 ääni tarjoaa paremman kokemuksen äänisisällön kanssa työskentelyyn. Viime aikoihin asti ainoa tapaäänitiedostojen lisääminen verkkosivuille oli taustaäänen integrointi tunnisteen avulla , jota toistettiin käyttäjän katsellen sivua ilman mahdollisuutta sulkea.

Lisäämällä uuden elementin HTML5-spesifikaatioon

Kuinka lisätä HTML5-ääntä verkkosivulle

1. Elementti

Selaimen tuki

IE: 9.0
Firefox: 3.5 perustuki, 15.0 - täysi
Kromi: 3.0
Safari: 3.1
Ooppera: 10.5
iOS Safari: 7.1
Ooppera Mini: —
Android-selain: 4.1
Chrome Androidille: 44

HTML5-elementti

Controls-attribuutti lisää selaimet, jotka näyttävät audiosoittimen ohjausliittymän - toisto-, tauko-, äänenvoimakkuuspainikkeet.

Tällä hetkellä ei ole olemassa kaikissa selaimissa toimivaa äänimuotoa, joten on suositeltavaa sisällyttää useita äänilähteitä, jotka esitetään elementin src-attribuutilla, jotta sisältö on mahdollisimman laajan yleisön saatavilla. ... Varasisältöä voidaan lisätä samanaikaisesti selaimille, jotka eivät tue elementtiä

2. Äänikoodekit

Äänikoodekki (dekooderi) on ohjelma digitaalisen tiedon muuntamiseksi äänitiedostoksi tai äänivirtamuotoon. Suosittuja äänimuotoja ovat seuraavat:

MP3- suosituin häviöllinen pakkausäänimuoto, jonka avulla voit pienentää tiedostokokoa useita kertoja. Firefoxia ja Operaa ei tueta rojaltien vuoksi.

AAC (Advanced Audio koodekki) - suljettu koodekki, MP3-analogi, mutta verrattuna jälkimmäiseen, se tukee enemmän korkealaatuinenäänen samankokoisella tiedostolla.

Ogg Vorbis — vapaassa muodossa kanssa avoin lähdekoodi, tuettu Firefoxissa, Operassa ja Chromessa. Tarjoaa hyvä laatuäänen, mutta laitteistosoittimet eivät tue niitä laajasti.

3. Vaihtoehtoiset mediaresurssit

Elementti käytetään useiden mediaresurssien lisäämiseen

4. Tekstitysten ja otsikoiden lisääminen

Elementti käytetty lapsena

5. Tyylitelty esimerkki soittimesta

CSS-tyylien avulla voit antaa soittimellesi epätavallisen ilmeen. Toistoa ohjataan pienellä skriptillä (käyttämällä jQuery-kirjastoa), ääni tulee näkyviin, kun siirrät hiiren levyn päälle.

Hei rakkaat blogin lukijat. Ei ole yllättävää, että mediasivustoista on tullut viime aikoina yhä suositumpia. Tällaisilta sivustoilta on erittäin mielenkiintoista löytää esimerkiksi jonkinlaista videota tai kuunnella hienoa musiikkia. Mutta tällä kertaa kuuntelemme musiikkia kanssasi, nimittäin opimme lisäämään äänitiedostoja sivustollemme HTML5:n avulla.

Kuten käy ilmi, HTML5 tukee äänitageja, mikä tekee musiikin lisäämisestä sivustollesi erittäin helppoa. On totta, että kaikki vanhat selaimet eivät toista äänitiedostoa, mutta kaikki nykyaikaiset selaimet tekevät sen räjähdysmäisesti.

Demo

Selaimen tuki

Kaikki selaimet, jotka tukevat tunnistetta

Esimerkiksi: IE9 + tukee vain mp3-tiedostoja, mutta ei tue wav- ja ogg-tiedostoja.

Chrome version 6 jälkeen tukee melkein kaikkia formaatteja.

Opera 10+ ei tue mp3:a, rehellisesti sanottuna minusta näyttää siltä, ​​​​että tämä on sen erittäin suuri haittapuoli, niin suosittu muoto ei tue sitä. Mutta wav ja ogg toimivat hyvin.

Firefox on sama tarina kuin Opera. Tästä hänellä on valtava ja lihava miinus.

Safari tukee kaikkia ääniformaatteja paitsi ogg.

Äänitiedoston lisääminen sivustolle

Jos haluat lisätä äänitiedoston sivustollesi, sinun on oltava tunnisteiden välissä anna suora linkki tiedostoon. Linkki osoitetaan tagilla ... Valmis koodi näyttää tältä:

Kuten näet, tähän lisätään 3 tiedostoa kerralla, joten jos jokin selain ei tue mp3:a, se toistaa automaattisesti tukemansa muodon ja niin edelleen.

Ja jos selain ei tue tunnistetta ollenkaan

Mutta olemme ystävällisiä ihmisiä :-) Ja jos käyttäjä ei voi kuunnella musiikkia, annamme hänen ladata sen. Tätä varten sinun tarvitsee vain lisätä linkkejä tiedostoihin. Siten saamme seuraavan koodin:

Selaimesi ei tue ääntä

Näin käyttäjä voi ladata tiedoston :-)

Ystävät, tässä on esimerkki työstämme. Selain korvaa itse yksinkertaisen soittimen.

Demo

Siinä kaikki, rakkaat ystävät... Jos sinulla on kysyttävää tai vaikeuksia, kysy kommenteissa. Nähdään pian.

Hei kaikki. Andrei kanssasi.

Tässä julkaisussa opimme, kuinka voit muodostaa yhteyden ääni HTML:ään sivu, ts. tiedostot äänimuoto sivustollesi.

Upotusmenetelmiä on 3 äänitiedostoja.

Napsauta tätä linkkiä, se käynnistyy automaattisesti vakio ohjelma toistaaksesi tietyn muotoisia tiedostoja, yleensä tämä Windows Media(toistaa AIFF-, AU-, MIDI-, WAV- ja MP3-tiedostoja). Tämä vaihtoehto on sinulle tuttu, joten siirrytään eteenpäin.

Toinen tapa on käyttää konttia .

Tämä kontti mahdollistaa kuuntelemisen suoraan verkkosivulla näkyvillä toistotyökaluilla, mutta toistokonsoli voi näyttää erilaiselta eri selaimet.

Jotta tämä säilö voidaan näyttää, selaimeen on asennettava erityinen laajennus. V Internet Explorer se on oletuksena päällä, mutta kuten muissakin selaimissa, kaikilla ei välttämättä ole sitä. Sitten sinun on asennettava se.

XHTML

Parametri src on pakollinen, määrittää toistettavan tiedoston nimen. Loput parametrit voidaan jättää pois. Luettelo niistä on alla.

LEVEYS = n- määrittää konsolin leveyden pikseleinä.

KORKEUS = m- määrittää konsolin korkeuden pikseleinä.

AUTOSTART = TOSI | EPÄTOSI- jos on arvo TOSI, toisto alkaa automaattisesti.

AUTOLOAD = TOSI | EPÄTOSI- jos asetuksena on FALSE, tiedostoa ei ladata automaattisesti.

ALOITUSAIKA = "mm: ss"- toisto alkaa minuutteina sekunteina määritetystä hetkestä tiedoston alusta.

TOISTA = TOSI / EPÄTOSI- sallii tai kieltää ääni-/videoleikkeen toistamisen.

PLAY LOOP = Z- jos määritit REPEAT-TRUE, määritä tässä toistojen määrä Z:n sijaan.

VOLUME = prosenttiosuus- toiston äänenvoimakkuus ilmaistuna prosentteina enimmäismäärästä.

ALIGN = "arvo"- Tasaa hallintakonsolin sivun tekstin suhteen. Voidaan olla KESKUS, PERUSTASO YLÄ VASEN, OIKEA.

CONTROLS = "arvo"- asettaa joukon konsolin säätimiä. Voi olla seuraavat arvot (selvitetty alla) -CONSOLE, SMALLCONSOLE, PLAYBUTTON PAUSEBUTTON, STOPBUTTON ja VOLUMELEVER.

KONSOLI- Täysi ohjausjärjestelmä.

PIENI KONSOLI- kompakti näkymä konsoliin. Täysi setti säätimet, paitsi taukopainike.

PLAYPAINIKE- vain toistopainike.

TAUKOPAINIKE- vain taukopainike.

PYSÄYTYSPAINIKE- vain pysäytyspainike. Tämä purkaa tiedoston.

ÄÄNENVOIMAKKUUS- vain äänenvoimakkuuden säädin.

Selvitimme parametrit.

Suosittelen kokeilemaan itse erilaisia ​​parametreja ja katso kuinka ne toimivat (tässä ei ole mitään monimutkaista).

Kolmanneksi tapa on määrittää äänitiedosto sivun taustaääneksi.

Syntaksi on yksinkertainen: