Inhalt
- Kuckt dëse Video fir den Tutorial ze begleeden ...
- 01. Ass et néideg?
- 02. Ëmwelt
- 03. Ass et nervt?
- 04. Leeschtung
- 05. Kontext an Identitéit
- Coda
Sound am Internet. Ech weess. Historesch sinn dës zwou Saachen net ganz gutt zesumme gaang. Déi meescht vun eis si verbrannt beim Besuch vun engem Site deem säi Schëpfer gemengt huet, héchstwahrscheinlech als Iwwerleeung, datt en Hannergrondbett vum schrecklechen Elektro-Jazz en exzellente Wee wier fir d'Stëmmung ze verbesseren. Glécklecherweis muss et net esou sinn. Mir kënne Saachen anescht maachen.
Wann d'Leit iwwer natierlech versus Web Apps schwätzen, kritt den Audio ni eng Ernimmung. Awer et ass dëst Element dat d'UI vu villen natierlechen Apps hëlleft iwwer hir Websäiten ze exceléieren. Huelt d'Kamera App op engem Telefon, zum Beispill. Wéi wësse mer wéini eng Foto gemaach gouf? Dir wäert héchstwahrscheinlech eng Aart Blitz um Bildschierm gesinn fir unzeginn datt e Bild ageholl gouf, awer et ass normalerweis mat dem Sound vun engem emuléierte mechanesche Klick vun der Kameraverschloss ënnerstëtzt. Wat iwwer Twitter's berühmte "Pull to Refresh" Kontroll? Wier et sou zefriddestellend wann et net dee klenge 'Pop' hätt wann Dir lass gitt?
Kuckt dëse Video fir den Tutorial ze begleeden ...
Also firwat elo doriwwer nodenken? Wat ass geännert? Gutt fir eng Saach, musse mir net méi op Flash vertrauen. Mat der Arrivée vun der Audio> Tag a mat ëmmer méi Browser déi de Web Audio API implementéieren, kënne mir Sound am Browser produzéieren mat Null Lag a mat méi Kontroll wéi mir jeemools virdrun haten. Mir mussen net emol Audiodateien benotze wa mir net wëllen. De Web Audio API erlaabt eis den Toun op de Client ze kreéieren, sou wéi mir et maachen wann Dir Biller vun Null erstallt andeems Dir op de Leinwand Element, awer méi doriwwer méi spéit.
Sot mir wëllen engem Benotzer Bescheed soen wann den Upload vun senger Foto op eiser Websäit fäerdeg ass. Mir wëllen e puer Audio Feedback ubidden andeems en Toun spillt. Och wann dëst technesch zimlech einfach ass ze realiséieren, kann et de Benotzererfarung schueden wann et net richteg duerchduecht ass. Fir e puer Guidance ze ginn, hunn ech eng Lëscht vu fënnef wichtege Saachen erstallt fir ze berécksiichtege wann Dir Audio an Är Web App bréngt.
01. Ass et néideg?
Et gëtt kee Besoin fir all hovered Link oder mat all CSS Iwwergank ze sprangen a blëtzen. Eng Handlung oder Resultat sollt nëmme vun engem Sound begleet ginn, wann et e wichtege Message un de Benotzer staark verstäerkt oder kläert. De Benotzer eppes matdeelen wat seng Opmierksamkeet erfuerdert? Wahrscheinlech. Linken ze klicken? Definitiv net.
02. Ëmwelt
Vläicht ee vun de Grënn, datt natiirlech mobil Apps éischter Toun méi ëmfaassen, ass datt et noutwendeg gëtt zousätzlech Feedback an engem Ëmfeld ze bidden, dat méi wahrscheinlech Kaméidi ass a mat visuellen Oflenkunge gefëllt ass. Ass Är Web App méi wahrscheinlech ënnerwee benotzt ginn, oder an engem rouege Büro wou sou Téin fir anerer oflenke kéinten? Wann Dir denkt Audio ze addéieren fir eng mobil Erfahrung ze verbesseren, betruecht den Terrain vun Ärem Audio. Bassy Téin, zum Beispill, schneiden net duerch Hannergrondrauschen, wat et schwéier héiert.
03. Ass et nervt?
Audio kënnt mat der zousätzlecher Belaaschtung potenziell extrem irritéierend ze sinn. Heiansdo ass et de Sound selwer, aner Mol ass et drun datt et widderholl gëtt. Heiansdo sinn et allebéid (lauschtert dem Samsung seng rezent Notifikatiounspfeifel) Glécklecherweis kënne mir d'Chance reduzéieren datt dëst geschitt mat e puer Saachen:
- Maacht den Toun kuerz. Manner wéi eng Sekonn ass léiwer, eng hallef Sekonn ass nach besser.
- Gitt sécher datt d'Noten, déi Ären Sound ausmaachen, harmonesch sinn, an datt d'Kleedung agreabel ass.
- Widderhuelen nëmmen den Toun wann et onbedéngt néideg ass.
Wat d'Widderhuelung ugeet, Chat Uwendungen wéi déi, déi Deel vu Facebook a Google+ sinn, benotze Geräisch fir de Benotzer matzedeelen datt een hinnen eng Noriicht geschéckt huet. Dëst mécht Sënn wann e Benotzer Facebook op enger anerer Tab op huet wéi deen am Moment wou se schaffen, well et ass e kloren Indikator datt eppes wat Opmierksamkeet erfuerdert waart. Wéi och ëmmer, wa se am Moment op dësen Chat äntweren, wat profitéiert d'Notifikatioun?
04. Leeschtung
Ofhängeg dovun wéi laang et ass, kann e Stéck Audio eng Dateigréisst méi grouss hunn wéi déi meescht Biller op Ärer Säit. Glécklecherweis beaflosst dëst näischt visuell, oder blockéiert all Funktionalitéit. Also, anstatt Audiodateien niewent Ärem HTML a Biller erofzelueden, betruecht se am Hannergrond ze lueden nodeems d'Säit gelueden ass, wärend de Benotzer glécklech mat Ärer Säit interagéiert.
Besser nach, kuckt d'Web Audio API ze benotzen wou Dir kënnt. De Web Audio API ass en héijen Niveau fir Toun am Browser ze manipuléieren mat JavaScript. Obwuel et de Moment net an alle grousse Browser implementéiert ass, ass et definitiv derwäert ze denken et zesumme mam Audio Element als Fallback ze benotzen. D'API erlaabt Iech Sound am Browser vun Null un ze kreéieren ouni scho existent Audiodateien ze benotzen. Wärend seng Ins an Outs ausserhalb vum Ëmfang vun dësem Artikel sinn, kënnt Dir kucken wéi ech den Erfolleg-Demo.html Notifikatiouns Sound (verfügbar fir erofzelueden an den Tutorial Dateien) a JavaScript wann Dir Chrome, Safari oder Firefox benotzt.
05. Kontext an Identitéit
Audio erstallt fir d'Benotzererfarung vun enger lëschter Säit fir Kanner ze verbesseren, ass net fir eng Finanzweb App ubruecht. Stellt Iech vir d'Stëmmung vun der Persoun déi Är App benotzt a gitt sécher datt Dir Ären Toun entspriechend wielt.
Sound kann och sou integral en Deel vun enger Mark ginn wéi seng visuell Identitéit. De Mac Startup Sound, den Nokia Ringtone an den Intel's Inside Chime si Beispiller wou wa mir dës Téin aus dem Kontext héieren, wësse mir nach ëmmer déi involvéiert Firmen. Och wann et net noutwendeg ass Äert eenzegaartegt Motiv bei all Geleeënheet d'Ouerkanäl vum Benotzer erof ze sträichen, betruecht eng Suite vu Kläng ze schafen déi d'visuell Identitéit vun Ärem Site reflektéieren. Facebook huet dës Iddi viru kuerzem e Schrëtt weider gemaach; säin ukommene Ruff Sound besteet aus véier musikaleschen Nouten: F, A, C, an E.
Coda
Wann et gutt gemaach gëtt, kann Audio souguer déi dullst vu Webapps verbesseren an beräicheren. Vergiesst d'Autoplay Hannergrondmusek, fokusséiert op wéi et d'Gesamterfarung an d'Vergnügung vun Ärem Site verbessere kann. Zwar gëtt et net ëmmer ubruecht. Wéi och Är Benotzer nerven, musst Dir oppassen fir déi kierperlech bei Ärem Benotzer ze nerven. Den iPhone Benotzer deen de Sound vun der on-screen Klacktastatur net ausgeschalt huet kënnt an de Kapp. Audio derbäi soll virsiichteg mat engem liichten Touch gemaach ginn.
Elo datt de Web Audio API a Chrome, Safari, Firefox an Opera ënnerstëtzt gëtt, hu mir elo komplett Kontroll iwwer Toun ouni eroflueden vu gewiichtleche Verméigen. D'Kraaft vun der API sollt och net ignoréiert ginn. Dynamesch Uwendung vun Audioeffekter wéi Reverb, oder zwou getrennte Museksstécker kräizfalen transforméiert déi aktuell Fäegkeete vun HTML5 Spiller, wouduerch déi ganz Erfahrung vill méi immersiv ass. Dir kënnt souguer Museksinstrumenter a Browser erstellen, déi hir gebierteg Rivalen erausfuerderen. Awer, ech géif dat soen. Kuckt meng Trommelmaschinn mat der Web Audio API gemaach.
Kläng kënnen esou effektiv sinn fir Feedback zu Äre Benotzer wéi all visuell Zeechen. Et ass Zäit datt mir et erëm mat der Warnungserfarung an eis agefouert hunn.
Wierder: Stuart Memo
Dësen Artikel erschéngt ursprénglech an der Net Magazin Ausgab 250.
