WEB AUDIO

De kracht van di­gi­ta­le au­dio­pro­duc­tie voor het web.

Web Designer Magazine - - Html5 Audio -

Plug-ins als Flash wa­ren ja­ren­lang de eni­ge ma­nier om audio op het ver­der vrij stil­le web te krij­gen. Maar je hebt vast al ge­hoord van de HTML5 <audio>-tag, waar­mee er geen af­han­ke­lijk­heid meer is van plu­gins en je au­dio­con­tent ge­woon kunt em­bed­den. Die tag is goed te com­bi­ne­ren met Ui-con­trols en ook van­uit Ja­vascript heb je goe­de con­tro­le over het af­spe­len. Het ge­bruik van de <audio>-tag is erg sim­pel: <audio src=”my­fi­le.mp3” au­to­play></audio> Met de­ze re­gel wordt het be­stand my­fi­le.mp3 au­to­ma­tisch af­ge­speeld wan­neer de pa­gi­na wordt ge­la­den. Ja­vascript biedt wat meer flexi­bi­li­teit wat audio-play­back be­treft, waar­bij je ook kunt re­a­ge­ren op events en ge­brui­kers­in­ter­ac­tie en der­ge­lij­ke: var audio = new Audio(“my­fi­le.mp3”); audio.play(); De toe­voe­ging van <audio> en de bij­be­ho­ren­de func­ti­o­na­li­teit was een gro­te stap voor­waarts, maar brengt wel di­ver­se be­per­kin­gen mee. Voor ge­a­van­ceer­de in­ter­ac­tie­ve audio-er­va­rin­gen heb je wat krach­ti­gers no­dig.

Wel­kom in de we­reld van de Web Audio API. Het doel van de API is om fea­tu­res ter be­schik­king te stel­len die we ken­nen van mo­der­ne ga­ming-audio- en desktopau­dio­pro­duc­tie­soft­wa­re. Dat be­te­kent on­der­steu­ning voor fea­tu­res als spa­ti­al-audio, mixing en pro­ces­sing en de mo­ge­lijk­heid om een au­dio­st­ream met­een met Ja­vascript te ver­wer­ken.

Om dat voor el­kaar te krij­gen, ver­werkt de Web Audio API audio met een gra­fen­struc­tuur. Je definieert een in­put-sour­ce en verbindt die met een output via een sequentie van ‘no­des’ die ver­schil­len­de ope­ra­ties op de audio uit­voe­ren om effecten te cre­ë­ren. Dat maakt een veel­heid aan com­plexe effecten mo­ge­lijk voor een ran­ge aan ver­schil­len­de sce­na­rio’s.

Ge­a­van­ceer­de au­dio­pro­ces­sing kan erg com­plex zijn. Om me­ni­ge func­tie zelf te im­ple­men­te­ren, moet je wel echt wat van de wis­kun­di­ge ope­ra­ties be­grij­pen die je op de ge­luids­gol­ven moet toe­pas­sen. Daar­door zul je mee­stal bi­bli­o­the­ken of kant-en-kla­re func­ties wil­len ge­brui­ken. Ge­luk­kig zijn daar op in­ter­net ge­noeg van be­schik­baar.

Houd in het ach­ter­hoofd dat je de Web Audio API niet per se hóeft te ge­brui­ken. Hij is aar­dig spe­ci­a­lis­tisch, dus je kunt be­ter eerst be­den­ken of een com­bi­na­tie van de <audio>-elementen met wat Ja­vascript­con­trols niet vol­staan voor wat je in ge­dach­ten hebt.

JE DEFINIEERT EEN IN­PUT-SOUR­CE EN VERBINDT DIE MET EEN OUTPUT VIA EEN SEQUENTIE VAN ‘NO­DES’ OM EFFECTEN TE CRE­Ë­REN. KIJK OOK EENS NAAR DE WEB AUDIO API TUTORIAL OP PA­GI­NA 92

Si­mon Jo­nes Soft­wa­re-en­gi­nee­ring di­rec­tor DE­ZE TECH­NO­LO­GIE­ËN IL­LU­STRE­REN DE TEN­DENS OM STEEDS MEER MET DE BROW­SER TE DOEN. VOOR TRA­DI­TI­O­NE­LE WEB­SI­TES ZIJN ER SIM­PE­LE USE-CA­SES VOOR UI-AUDIO-EFFECTEN OM GE­LUID TE IN­TE­GRE­REN. DE API’S GAAN WEL EEN GRO­TE...

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.