Leiskite HTML5 garso įrašą naršyklėje

Šis straipsnis pirmą kartą pasirodė Gegužės mėn. Numeris (227) .net žurnalas - perkamiausias pasaulyje žurnalas, skirtas interneto dizaineriams ir kūrėjams.

Tradiciškai viskas, kas pagrįsta žiniatinkliu, grojo garsą kaip „Flash“ programėlę. Dabar HTML5 turėtų perimti, o „Adobe“ sustabdžius „Flash for mobile“ kūrimą, daugelis „Flash“ kūrėjų ieško naujų būdų, kaip atlikti tai, ką jie darė HTML5.
HTML5 yra puikus, tačiau garsas yra viena iš sričių, kuri vis dar vykdoma. Taigi, kaip atkurti garsą HTML5? Yra keletas variantų. Vienas yra žymą, palaikomą visų pagrindinių naršyklių. Tai galite paskambinti iš „JavaScript“ taip pat lengvai, kaip naują Garso įrašas („music.ogg“). Atkūrimas () . Bet jis skirtas muzikai perduoti, o kai kurios naršyklės turi problemų dėl atkūrimo, kai ji yra labai naudojama tokiems dalykams kaip žaidimo garso efektai. Štai keli naudingi metodai:

var a = naujas garsas (‘sound.ogg’); Sukurti naują garsą
žaidimas (); - pradėk žaisti
a. pauzė (); - nustok žaisti
a.currentTime = 0; - atsukti į pradžią
a. trukmė; - grąžina ilgį
a. baigėsi; - grąžinama tiesa, jei baigsite
a.loop = tiesa; - nustatyti kilpą
a. tūris = 0,5; - pusė tūrio
a.muted = true; - nutildyti
a.addEventListener ('baigėsi', func); - kai baigsite groti, skambinkite „func ()“

Kadangi jis buvo sukurtas muzikai, žyma visada transliuos garso įrašą iš serverio, todėl ji gali būti paleista prieš pilnai atsisiųsdama. Norėdami gauti išsamią informaciją apie žymę geriausia eiti tiesiai į specifikaciją - ieškoti HTMLMediaElement - arba kaip visada, „Mozilla Developer Network“ (MDN) turi gera santrauka .



Suprasdamas žymos trūkumų, „Google“ sukūrė „Web Audio“ API: pilną garso variklį su galingu maršrutu, efektais, tiksliu atkūrimu ir dar daugiau.
Tai idealiai tinka žaidimų garsui, gana paprasta ir daug galingesnė, tačiau norint pradėti, reikia daugiau kodo ir šiuo metu yra tik „W3C“ pasiūlymas. Jis taip pat pasiekiamas tik „Chrome“.
Šis kodas parodo, kaip naudoti „Ajax“, norint pateikti garso užklausą ir leisti ją kas dvi sekundes naudojant „Web Audio“ API. Atminkite, kad žiniatinklio rinkinio prefiksas bus išmestas iš „AudioContext“, jei jis bus standartizuotas:

// This will just be ‘AudioContext’ if standardised if (typeof webkitAudioContext == 'undefined') alert('Web Audio API not supported'); // The context handles audio playback. var context = new webkitAudioContext(); // A sound buffer. var dogBarkingBuffer = null; // Load dogbarking.ogg to the dog barking buffer. var request = new XMLHttpRequest(); request.open('GET', 'dogbarking.ogg', true); request.responseType = 'arraybuffer'; // Decode asynchronously request.onload = function() { context.decodeAudioData(request.response, function(buffer) { dogBarkingBuffer = buffer; }); } request.send(); // Function to play one instance of the // dog barking from the buffer. function playDogBarking() { if (!dogBarkingBuffer) return; // not loaded yet // Buffer sources are throwaway objects var source = context.createBufferSource(); source.buffer = dogBarkingBuffer; source.connect(context.destination); source.noteOn(0); } // Set a timer to play the sound every 2 seconds. setInterval(playDogBarking, 2000);

Skirtingai nuo žymą, šis pavyzdys gali atkurti garsą tik tada, kai bus visiškai atsisiųstas (kai „Ajax“ užklausa bus baigta). Tačiau atkūrimas yra greitas ir daugybę garsų galima atkurti neužgniaužus naršyklės, nes API buvo sukurta šiam tikslui. Norėdami sužinoti daugiau apie „Web Audio“ API, patikrinkite HTML5 Rocks mokymo programa (aukščiau pateiktas kodas yra pagrįstas tuo) arba peržiūrėkite siūlomas spec ties visu žemu lygiu.

kaip supjaustyti vaizdą Photoshop

„Mozilla“, nepatenkinta „Web Audio“ API, pasiūlė „MediaStream Processing API“. Tai yra bendra garso ir vaizdo API, ir tai vis tiek yra juodraštis. Kol kas jokios naršyklės jo nepalaiko, tačiau jame yra šaunių funkcijų, tokių kaip garso įrašymas ir drobės naudojimas kaip tiesioginis vaizdo srautas. „Firefox“ taip pat palaiko senesnę „Audio Data“ API, tačiau ji iš tikrųjų leidžia tik įrašyti pavyzdžius į garso buferį. Tai yra per žemas lygis, kad būtų praktiškai naudinga kuriant pažangias programas, tokias kaip žaidimai.

Kai kurie kūrėjai vis dar naudoja „Flash“, kad leistų garsą su tokiais aptaisais kaip „SoundManager 2.“. Mobiliuosiuose, vietinių programų įpakavimo įrenginiuose, pvz., „PhoneGap“ ir „AppMobi“, taip pat galima pateikti savo API.
Tai gali būti naudinga jums, bet mus domina grynas HTML5! Taigi kol kas geriausias būdas yra naudoti žymą, bet galbūt norėsite naudoti „Web Audio API“ naršyklėje „Chrome“, kad būtų galima atlikti patikimesnį atkūrimą.

Kodekų cirkas

Galbūt anksčiau pastebėjote .ogg plėtinį pavyzdyje, kuris nebuvo klaida! Tai nemokamas, atviras „Ogg Vorbis“ garso formatas, o „Flash“ paprastai naudoja MP3. Deja, tai priveda prie kito skausmingo HTML5 garso taško: nėra vieno garso formato, kurį palaikytų visos naršyklės.

Iš tikrųjų yra penki pagrindiniai kandidatai: nesuspausti bangų failai, MPEG-1 sluoksnis 3 (MP3), MPEG-4 AAC (arba tiesiog AAC trumpai, bet kartais dar vadinamas MP4), Ogg Vorbis ir WebM. Nesuspaustą bangą galime iš karto sumažinti, nes failai paprastai būna per dideli pristatymui žiniatinklyje - vartotojus paliksite amžių laukti, kol jie bus įkeliami! „Ogg Vorbis“ yra panašus į MP3 failų dydžiais ir kokybe, tačiau jis nėra patentuotas ir laisvai naudojamas visiems. „WebM“ yra nemokamas ir atviras, kaip ir „Ogg Vorbis“, ir iš tikrųjų „Vorbis“ tiesiog saugo kitame inde, todėl laikykime tai kol kas lygiaverčiu „Ogg Vorbis“. „Ogg Vorbis“ taip pat turi pranašumą, kad jis yra labiau įsitvirtinęs ir žinomas, turėdamas didesnę paramą, nes dabar jis yra maždaug 10 metų, palyginti su dvejų metų „WebM“.

Daug informacijos ir atsisiuntimų atviriems kodekams, pavyzdžiui, nemokamiems „Ogg Vorbis“ formato koderiams ir dekoderiams, galite rasti adresu xiph.org ir vorbis.com

„MPEG-4 Advanced Audio Coding“ (arba trumpiau AAC) yra patentuotas formatas, kurio naudojimas nėra visiškai nemokamas - jei platinate koduotojus ar dekoderius, turite sumokėti mokesčius ir honorarus. Tai nėra problema daugumai žmonių, kurie kuria internetą, tačiau įrankių gamintojams tai gali sukelti problemų. Pavyzdžiui, jei norite sukurti HTML5 biblioteką ar redaktorių, kuris padėtų koduoti garsą AAC, jums gali tekti mokėti. Vis tiek galite privačiai koduoti AAC failus ir nemokamai juos platinti internete - jei patentų savininkai nepakeis nuomonės. Galiausiai yra pažįstamas MP3 failas, tačiau licencijavimas gali padaryti jį netinkamu: MP3 licencijavimo svetainėje nurodoma, kad už žaidimo platinimą naudojant MP3 failus mokamas 2500 USD mokestis! AAC gali nemokamai platinti žaidimuose ir yra geresnės kokybės formatas, todėl nėra pagrindo svarstyti MP3 ir rizikuoti - tiesiog pereikite prie AAC (jei norite gauti daugiau informacijos, skaitykite „Kas blogai su MP3, kitoje pusėje“).

Trumpai tariant, vieninteliai tikrieji kandidatai yra Oggas Vorbis ir AAC. „Chrome“, „Firefox“ ir „Opera“ palaiko „Ogg Vorbis“. „Chrome“, „Safari“ ir „Internet Explorer“ palaiko AAC. Taigi, jei naudojate tik „Ogg Vorbis“, praleidžiate „Safari“ ir „Internet Explorer“, o jei naudojate tik AAC - „Firefox“ ir „Opera“. Oi! Deja, realybė yra ta, kad visą garsą turite užkoduoti tiek „Ogg Vorbis“, tiek „AAC“.

Savo „JavaScript“ galite nustatyti, ar naršyklė palaiko „Ogg Vorbis“ su šia eilute:

var canPlayOgg = !!(new Audio().canPlayType('audio/ogg; codecs='vorbis''));

Jei „canPlayOgg“ tiesa, įkelkite failų .ogg versiją; priešingu atveju įkelkite .m4a (tipinis AAC plėtinys).

Naudojant naršyklės technologijas, kodekų palaikymas yra vienodas visoms API (pavyzdžiui, „Chrome“ su „ ir „Web Audio“ API). Naudojant ne naršyklės sprendimus, palaikomi formatai skirsis!

Kodėl ne vienas formatas?

Šiuo metu yra šiek tiek nesutarimų su naršyklių kūrėjais dėl garso formato palaikymo. „Mozilla“ teisingai pabrėžia, kad internetas yra sėkmingas dėl savo laisvo ir atviro pobūdžio. Internetas niekada negalėjo atsikratyti, jei būtų taikomi patentai ir mokesčiai už daugelio susijusių technologijų naudojimą: HTML, DOM, „JavaScript“, PNG, HTTP, TCP / IP ir pačią naršyklę. Tuo remiantis ji atsisako pridėti patentuotą formatą prie šiaip nemokamo ir atviro interneto.

Nėra jokios techninės priežasties, dėl kurios „Internet Explorer“ ir „Safari“ nepalaiko „Ogg Vorbis“. Tai nemokamas ir atviras formatas, kurį bet kuris naršyklės kūrėjas gali įgyvendinti bet kada. Aklavietės priežastis yra grynai politinė. „Microsoft“ ir „Apple“ savo verslą paverčia nuosavybe. Klausimas kilo dėl didesnio karo dėl vaizdo formatų, o palaikomas garso formatas bus toks, koks yra su vaizdo įrašu. Vaizdo įrašai nepatenka į šio straipsnio taikymo sritį, tačiau „Apple“ ir „Microsoft“ tikriausiai siekia užsidirbti pinigų iš interneto naudodamiesi patentuotais formatais, todėl jiems labiau patinka. Abi pusės mėgsta teigti, kad papildinius galima naudoti papildomiems formatams palaikyti, tačiau akivaizdu, kad tai pralenkia nemokamą HTML5 papildinių naudojimą, todėl tai iš tikrųjų nėra pasirinkimas.

Taigi tai yra netvarka HTML5 kūrėjams ir su tuo „Flash“ kūrėjams nereikėjo susidurti. Tai šiek tiek nepatogu, tačiau dviguba abiejų formatų koduotė išsprendžia problemą. Priklausomai nuo naršyklės palaikymo, vartotojui teks atsisiųsti tik vieną rinkinį failų, todėl jis nepraras jūsų pralaidumo.

Geriausias formatas HTML5 kūrėjams tikrai yra „Ogg Vorbis“ dėl „Mozilla“ nurodytų priežasčių: jį galite naudoti laisvai ir nevaržomai, nerimaudami dėl patentų ar licencijų. Tiesą sakant, pats HTML5 standartas rekomendavo „Vorbis“ garso įrašams ir „Theora“ vaizdo įrašams „Ogg“ talpykloje. Tačiau kai kurių susijusių bendrovių spaudimas privertė atsisakyti rekomendacijos, o dabar HTML5 standarte neminimi jokie formatai, kurie leido susidaryti šiai situacijai.

Gaila, nes nemokami formatai neabejotinai yra tinkamiausi žiniatinkliui. HTML5 kūrėjai gali padėti susidariusiai situacijai, paskatindami „Microsoft“ ir „Apple“ savo naršyklėse pridėti „Ogg Vorbis“ palaikymą. Įsitikinkite, kad jie žino, jog tai jūsų pirmenybė! Turint tik vieną formatą, apimančią visą internetą, bus daug paprasčiau, kad jūsų HTML5 žaidimuose ir programose veiktų garso įrašai, ir tai palengvins visų gyvenimą.

Mobilusis

Mobiliųjų įrenginių naršyklės atsilieka nuo kolegų darbalaukyje. Be silpnesnės aparatūros, kai kurie gali leisti tik vieną garsą vienu metu - tai ribota garso patirtis. „iOS“ taip pat priduria, kad garsą galima leisti tik atliekant vartotojo inicijuotą veiksmą, pvz., paspaudus mygtuką, matyt, siekiant užkirsti kelią automatiniam grojimui, kai per daug pralaidumo matuojamuose korinio ryšio tinkluose naudojama per daug.

Tokios paslaugos kaip „PhoneGap“ ir „AppMobi“ siūlo „HTML5“ programoms mobiliesiems pritaikyti vietinių programų paketus. Tai ne tik leidžia skelbti įvairiose telefonų programų parduotuvėse, bet ir suteikia būdų, kaip išvengti įrenginio HTML5 garso apribojimų. Peržiūrėkite „PhoneGap“ medijos API arba „SoundPlug“ papildinį ir „AppMobi“ grotuvo API.

Išvada

Trumpai tariant, naudokite žymą, bet perjunkite į žiniatinklio garso API naršyklėje „Chrome“. Užkoduokite tiek AAC, tiek „Ogg Vorbis“ ir apimsite visas naršykles su kuo mažiau rūpesčių dėl patentų / licencijų.
Geriausia palaikyti kuo daugiau naršyklių, tačiau kai kuriose situacijose jums gali patikti tik viena. Pavyzdžiui, jei specialiai taikote „Google Chrome“, kūrimas bus lengvesnis, nes galite naudoti tik „Web Audio“ API ir „Ogg Vorbis“ garsą. Vis dėlto turėsite pasverti kūrimo naudą, palyginti su mažesne auditorija, kuri girdi garsą.

Šiuo metu nėra aiškios HTML5 garso krypties: mobilusis palaikymas turi būti geresnis ir neaišku, ar „Web Audio“ API bus standartizuota. Asmeniškai tikiuosi, kad taip bus, nes mane domina HTML5 žaidimai ir „Web Audio“ API tam puikiai tinka. „Mozilla“ „MediaStream“ API gali patekti arba bent jau tapti geresne žymos alternatyva „Firefox“. Tikimės, kad „Microsoft“ ir „Apple“ galų gale palaikys tam tikrą „Vorbis“ formą savo naršyklėse, tačiau tai toli gražu nėra aišku - ir tikėkimės, kad ne MP3, ne AAC galų gale neperims. Taigi turėdami HTML5 turėsite nuolat atnaujinti informaciją: antrieji naršyklių karai įsibėgėja ir viskas greitai keičiasi; ieškoti pokyčių ir atsirandančių naujų technologijų