Welkom terug in deze les zullen we focussen op het toevoegen in de audio dus het toevoegen in de muziek monsters die we spelen als we elke toets geraakt en zich ook richten op het geven van elke toets zijn eigen kleur, zodat we niet altijd deze oranje vervagen naar geel en dan groen, maar we zullen een aantal dat paars enkele die blauw zijn, zijn hebben zoals jullie allemaal verschillende kleuren kunt zien.
Maar het is altijd dezelfde kleur voor een bepaalde sleutel als H heeft dit altijd oranje cue is altijd zo dat T Y en ga zo maar door.
OK.
Dus om te beginnen we gewoon uitzoeken hoe we een geluid bij allen kunnen spelen.
Dus hoe we leiden tot een geluid met Hallard.
Ja in het Hausler is eigenlijk het tegenovergestelde van Paperchase zover de complexiteit het is echt heel eenvoudig, die het echt leuk maakt.
Ook hier kun je audio af te spelen zonder een bibliotheek maar het is een beetje.
Het is een beetje pijnlijk als je iets wilt als wat we willen doen waar we niet alleen een geluid één tijd spelen doen, maar ik wil in staat zijn om een ​​goede tien keer triggeren op een rij, zoals laten we zeggen dat ik dit doe onzin hier wil ik in staat zijn om iets te doen alsof er een klein beetje van het werk betrokken bij het maken van die eigenlijk de manier waarop we willen dat het gedragen.
Het is heel gemakkelijk om een ​​geluid af te spelen als spelen een lied dat is echt vervelend, maar als je op een website en er is wat jij een soort van geluid of lied het speelt op de achtergrond, dat is heel eenvoudig te doen met h tim uil en javascript's .
Maar om zoiets als dit, waar we hebben een heleboel gelijktijdige geluid te gaan en we kunnen dingen herhalen en dat zou een stuk makkelijker om iets als Hallard J ons gebruiken doen.
Dus nogmaals niet onmogelijk.
Net als alles wat een bibliotheek doet kun je het zelf doen.
Maar we zouden niet echt willen.
Dus als we eens kijken hoe het werkt dit is alles wat we nodig hebben om dit kleine stukje code hier te gebruiken, waar we een nieuwe manier te nemen.
Dus hoe is het ding dat we initialisatie en wist hoe.
Dan geven we het een lijst van een paar URL's van de bestanden die we willen spelen.
Dus de reden dat we geven het een array van deze verschillende u verschillende bestanden, zelfs al zijn ze eruit zien alsof ze zijn hetzelfde ze zijn gewoon verschillende bestandstypen en de volgorde waarin je ze in de orde dat de huiler zal proberen en load hen in.
Dus eigenlijk zijn er bepaalde bestandstypen die zal werken in elke browser een aantal van hen dat zal niet werken in elke browser.
Dus u kunt er zeker van back-ups opgeven.
We zijn niet van plan om dat te doen.
We zullen gewoon moeten een enkel bestand.
Maar als je wilde om backups te hebben in principe de manier waarop die werkt voor zover ik weet in ieder geval kunt u lezen over het hier weet ik zeker.
Hier gaan we u of anders de bron bent u anders naar de track of tracks worden geladen voor het geluid.
Deze moeten een volgorde van voorkeur.
Howard Jasc zal de eerste zijn die compatibel is met de huidige browser is automatisch geladen.
Dus daar ga je.
We kunnen toevoegen in andere versies van hetzelfde nummer.
In ons geval hetzelfde monster en holler zou automatisch de eerste die compatibel is geladen.
OK.
Dus de code die we nodig hebben is echter nieuw Howell.
En dan ga je en dat is het.
En toen we klaar om te spelen we gewoon bellen toneelstukken.
U kunt hier zien en we zullen niet stoppen.
We zullen niet onderbreken.
We zullen niet looping omdat onze geluiden zijn heel kort.
Dus we willen gewoon om te spelen en te laten eindigen buiten.
Elk exemplaar is ongeveer ergens tussen een halve seconde en een tweede.
Dus als je niet hebben gedaan, al ga je gang en download die zip-bestand dat alle geluiden heeft en meegesleurd in dezelfde directory waar u het schrijven van uw code.
Dus in plaats van geluiden die we hebben al deze bestanden.
Okee.
En het volgende wat we moeten doen is het installeren van Häusler Om het te gebruiken.
Dus je kunt downloaden.
Maar alleen voor verscheidenheid sake Ik zal een CDN te gebruiken.
Dus ik heb gewoon een zoektocht naar Howler CDN kopie deze eerste.
U bent hier allemaal kon altijd test het uit te zien of het geldig is.
Daar gaan we.
Hier is de code die voor de brulapen.
Perfect.
Laten we teruggaan naar onze app en dan gaan we gewoon toe te voegen in een script.
Dus na papier kan dupliceren en verander gewoon de bron naar de huiler jij laten we ervoor zorgen dat het laadt OK zonder enig probleem.
Perfect.
Volgende laten we eigenlijk onze eerste gehuil te maken.
Dus laten we opnieuw te kopiëren deze code uit Hower.
Neem deze eerste hier en laten we het doen bovenin te starten.
Dus we gewoon doen het goed hier en we zullen zeggen VAR's geluid is gelijk wist hoe en dan gaan we gewoon in één bestand en laten we de eerste die we zien.
Dus Bubbles kreeg MP 3, zodat er in de sound directory slash bellen stud MP 3.
Zo geluid.
Slash bubble.
Ik heb al vergeten te bellen gebruiken.
Daar ga je.
Is meervoud.
Dus klinkt alsof je Bubbels.
MP 3 en dat is alles wat we nodig hebben.
En laten we het niet meteen worden afgespeeld.
Laten we gewoon te maken dat.
Dat is alles wat we moeten doen.
En dan te spelen laten we gewoon spelen.
Als je naar beneden op een toets drukt, zodat het geluid dot spel echt leuk en eenvoudig laten we eens kijken het uit te proberen.
Daar gaan we.
Dus elke toets indrukken van een heleboel verschillende sleutels triggers nu dat geluid ok.
Hopelijk dat was niet al te vervelend.
Dus de volgende up laten we concentreren op het toevoegen van een ander geluid.
Dus we gewoon twee te beginnen.
Dus hebben we bellen.
Laten we het doen Clay MP3 zodat we konden doen, is dit gewoon dupliceren en doe een goede twee is nieuwe Howell en we zullen sound slash klei en P3 doen.
En wat zullen we doen hier is een if-statement.
Dus laten we focussen op twee sleutels.
Laten we een en s.
Dus als u op een of sleutel is een dan zullen we geluid af te spelen en laten we noemen het klinkt een net om het duidelijker als sleutel is je aanhalingstekens gebruiken rondom dit zo goed te maken.
Dan zullen we het geluid te spelen.
Dus om te vertellen wat toets werd ingedrukt het is echt gemakkelijk met Paperchase we hebben dit event object hier en we moeten doen is het evenement dot sleutel.
Dus we gewoon lezen als een statement als gebeurtenis die toets komt overeen met een.
Dan gaan we gewoon doen een toneelstuk geluid één.
Dus dat is het geluid een spel en dan hetzelfde doen.
Als event dot sleutel gelijken gelijk X zal dan spelen geluid ook doen.
Dus het geluid te spelen, net als dat.
Dus kunnen we proberen dat uit.
Dus alleen sleutel sleutels en S moet dingen activeren.
Dus ik zal je gelijk zeggen nu ben ik het raken van q lijkt erop dat we hebben een fout.
Wat krijgen we hier.
Geluid is niet gedefinieerd.
Negeer deze waarschuwingen hier voor nu zullen we de vaststelling die aan het einde.
Het is een complex vraagstuk, maar het zal echt niet in de weg van onze code te werken om te beginnen te krijgen.
Maar dit zal zo dom fout.
Ik was verwijzingen geluid hier.
We hebben geen geluid meer.
OK.
Dus nu niets zou moeten spelen.
Toen raakte ik de meeste toetsen, maar ik zal een K andere toetsen geraakt en had nu s.
Dus hebben we een n s.
Perfect.
En wat we konden zo goed doen is nu wijs een kleur aan een ieder dus konden we zoiets als dit te doen.
Laten we dit naar de onderkant van dezelfde toets ingedrukt, maar vlak voordat we duwen konden we zoiets hebben als event hij een toneelstuk die klinken en we kunnen stel de kleur van de nieuwe cirkel dot vullen kleur gelijk en dan kunnen we het eens kleur willen zien 3 5 0 en doe hetzelfde.
Als we druk op S, maar met een andere kleur, zoals laten we het doen 16 een 0 8 5 en dan kunnen we een anders hebben en hopelijk je denkt bij jezelf Dit is waarschijnlijk niet de beste manier om dit te doen.
Het is misschien OK voor twee en ons, maar hoe zit het met 20 30 of 50 toetsen.
We maken gebruik van het hele toetsenbord en al verschillende karakters.
Dat zou veel code.
Maar laat me gewoon laten je nu.
Dus cue meeste kleuren of de meeste toetsen niet geluid af te spelen.
Ze geven ons dezelfde kleur.
Nu als ik een UPS had ik raakte twee toetsen een geeft ons een iets andere kleur geeft ons een blauwe.
Dus natuurlijk de kleur die ik hier geplukt is hard.
Het is moeilijk om te zien laat me veranderingen veranderen paars te zijn.
En technisch moeten we dit een anders te maken.
Als dat zo is zullen we controleren of het toetsenbord is een LCF en anders als we hebben twee als statements.
Deze zal lopen en dan hebben we een ander indien en als dat niet het geval dan is de elso waar zijn, maar het zal geen rekening gehouden met deze verschijnen.
Dus als we willen alleen maar een van deze waar te zijn wat we willen alleen maar een kleur paars blauw of oranje.
Dan willen we dat ze deel uitmaken van één zijn als statement, maar het maakt eigenlijk niet uit want we gaan om dit te veranderen in slechts een seconde.
Nu onze refresh hier normale toetsen.
Ik raakte een al krijgen we paars hit als we blauw en twee verschillende geluiden.
OK.
Dus dat is hoe we Hausler gebruiken.
Nu willen we dit doen voor elke sleutel en er is een veel betere manier dan wat we hier hebben.
Dus ik ben eigenlijk van plan om zich te ontdoen van dit alles, want we konden.
Zoals ik al eerder heb een if-statement voor elke toets als sleutel is een dit te doen als sleutel B en voor elke toets.
Maar dat is niet echt een goede praktijk.
Dus wat we zullen doen in plaats daarvan is een object te definiëren en we noemen het belangrijkste gegevens en het is een object.
En dit is wat het eruit zal zien.
Dus we een sleutelrol als een te hebben.
En toen een gedrukt wordt zullen we zeggen dat de kleur moet paars zijn en dat geluid zou moeten zijn.
En laten we gewoon dit hele ding daar.
Dus ik zal gaan over dit in slechts een seconde.
Laat ik het eerst hier en dan kunnen we precies hetzelfde opnieuw doen voor ons.
Dus wanneer wordt ingedrukt kleur moet groen zijn en geluid moet nieuw zijn.
Hoe zal.
Hetzelfde wat je bent of anders, en laten we het doen geluid slash Clay dacht MP3 en dan kunnen we dat voor elke enkele toets te doen.
En ja, het is een stuk van de syntaxis hier, maar het voordeel is dat we een plaats voor al onze gegevens worden gedefinieerd en dan hebben we niet een if-statement of in een aparte voorwaardelijk voor elke sleutel nodig.
Alles wat we moeten doen is waar ben je event dot sleutel die eigenlijk verlost van.
Neem deze hier.
Event dot sleutel die is de sleutel die werd ingedrukt.
En laten we zeggen dat dit de letter J.
Als dat het geval is nemen we het gewoon en steek deze in belangrijke data en dat zal ons kleur paars geluid te geven.
Is dit geluid.
Dus ik zal je laten zien wat ik bedoel.
Laten we gewoon gaan met deze twee voorbeelden en om het meer voor de hand laten voegen in één tweevoud wat we hebben.
Dus hebben we een n s laten we doen ook D.
En kleur kan het te geel en vervolgens geluid.
Wat doen die we hebben.
Laten we het doen confetti.
Perfect.
Zich te ontdoen van deze slepende komma.
We kunnen nu zich te ontdoen van dit te krijgen en we zullen nodig hebben om dit te veranderen een beetje rond en het volgende ding dat zal doen is die gebeurtenis eend sleutel en steek de stekker in onze belangrijke gegevens.
Dus konden we zoiets als dit te doen.
Kerngegevens beugel evenement sleutel en dat zou ons voor als wanneer s was evenement geeft hij ons dit hele ding hier en dan kunnen we kleur, zodat we daar kunnen beginnen doen.
Dus wat we doen is voordat we duwen nieuwe cirkel en we zullen gewoon zeggen dat nieuwe cirkel vulkleur gelijk kerngegevens evenement hoofdkleur.
Dus gewoon te herhalen de donkere sleutel is een brief.
Welnu, in ons geval zullen we ervoor zorgen dat het een brief.
Technisch gezien kan een nummer of shiftier tab zijn, maar het is de sleutel die werd ingedrukt.
Dan nemen we dat en sluit deze aan op de kerngegevens.
We krijgen dit hele ding uit.
Als eventime sleutel is een als de gebruiker drukte op een toen we aan het doen zijn donkere kleur die ons paars geeft.
Dus toen we die nieuwe cirkel maar vul kleur paars te zijn.
Als event Duck Key is een maar aankondiging we hoeven niet te beschikken over een if-statement om dat te doen.
Dus we hoeven niet te zeggen dat als Turkije heeft dit te doen als gebeurtenis die toets wordt gevraagd om dit te doen.
Dit is dezelfde lijn wat er ook gebeurt.
Omdat we dit woordenboek of dit een bron van onze data gedefinieerd is er een probleem natuurlijk.
Dit werkt alleen voor een S en D op dit moment.
Dus laat ik je verfrissen ervoor te zorgen dat we geen syntax fouten.
Wij doen niet kan lezen kleur of kunnen niet goed lezen undefined gekleurd en dat is niet een syntax error.
Dat is de fout die ik verwacht.
Dus ik zal je laten zien.
Ik zal op een goede pers een of s zijn ook goed en D.
Maar nu ik op Q En we hebben een probleem.
En dat is, want dit is niet gedefiniëerd gegevens van Q bestaat niet.
We hebben een S en D.
Dus dat is een probleem.
De manier op te lossen dat is eenvoudig.
Alles wat we zullen doen is controleren of u dit recht doen hier.
Top binnenkant van die toets drukt als kerngegevens beugel evenement Docky.
Dus niet vergeten als dit truthy In principe als het bestaat dan zullen we dit allemaal doen.
Anders als het niet bestaat zullen we niets te beginnen te doen.
Ik wil eigenlijk helemaal niets te doen.
Dus nu onze Apple werken alleen het zal alles doen of alleen maar iets te doen als u op een S en D.
Dus gewoon om terug te gaan laten we ervoor zorgen dat nu werkt.
Q Er gebeurt niets.
Ik ben het indrukken van een sleutelbos.
Nu raakte ik.
En het werkt.
S en D, maar geen andere belangrijke iets doet.
Grote.
Dus nu laten we het geluid af te spelen.
Dus dat is ook leuk en eenvoudig.
We hoeven alleen maar sleutel data event key geluid en ik weet niet zeker waarom ik deze twee geluiden die geluid moeten zijn vernoemd.
Daar gaan we dat geluid dot spel.
Denk aan de Venki wordt aangesloten op dit Savey druk D.
We krijgen dit object.
Wij doen DAT geluid op.
We krijgen deze die we vervolgens run spelen net als vroeger.
OK laten we geven het een schot.
Een als de.
En de andere toetsen niets doet.
Perfect.
Dus alles wat we hebben verlaten om hier te doen is eigenlijk alleen maar toe te voegen in al haar andere toetsen en dat is echt pijnlijk zou zijn voor u om naar te kijken me typen vanaf nul.
Ik heb dat pre-done Ik gaf je het bestand in de download.
Ik noemde het van dag tot dag.
Ja.
Dus als we openen dat tot het is gewoon een gigantische object dat alle lettertoetsen heeft.
Dus hebben we q w e r.
Ze zijn niet echt in een willekeurige volgorde.
Nou, ze zijn, maar geen bepaalde orde zoveel kleuren en geluiden.
Ik koos zojuist willekeurige enen en ze hebben elk een kleur.
Dus als we kopieer deze en vervang wat we hier hebben ervoor zorgen dat we noemen het kerngegevens perfect.
We hebben nu voorzien van dit woordenboek van klinkende kleuren voor elke key elke alfabet sleutel op zijn minst.
En we kunnen gebruiken.
We hoeven niet te onze code helemaal veranderen.
Dus het is echt leuk als we willen toe te voegen in de numerieke toetsen waar we willen voegen in het tabblad en verschuiven en te ontsnappen en alles wat we gewoon een extra eigenschappen toe te voegen op dit object.
Dus laten we proberen dicht het beneden refresh.
Perfect.
Okee.
Dus niet weg hier laten meeslepen.
Best leuk hoor.
OK.
Oke dat is genoeg.
Dus we hebben veel overdekte maar aan het eind van de dag alles wat we echt deden was wel wat code die we gevonden om een ​​cirkel te maken.
We namen een aantal code die we gevonden om een ​​cirkel animeren om de kleur te veranderen.
We vonden een aantal code om gebeurtenissen te doen.
Dus als u een toets indrukt.
En dan combineren we dat met een aantal andere code vonden we wat muziek te spelen.
En als je het samen te stellen kunt u een aantal leuke dingen te maken en er is veel meer je kunt doen hier.
En we zijn niet 100 procent klaar.
We zijn klaar met de functionaliteit, zodat we niet toe te voegen in alle nieuwe functies en zal er niet anders uit.
Maar als je het openstellen van de console zie je krijgen we al deze kan geen bestanden laden SML HTP verzoek kruis oorsprong.
Blah blah blah.
Ik zal dekken die in de volgende video.
Praat over de reden waarom dat gebeurt en hoe kunnen we het te repareren.
En dan de ander ding dat we doen is praten over een kleine manier van refactoring dit want nu elke keer als ik druk ben ik het toevoegen van een nieuwe kring array van de cirkel en ik ben ze nooit verwijderen uit die array.
Dus zou ik 10000 daar nu hebben.
Nou ik niet, maar ik kan wel honderd en er zijn 200 en we zijn looping over die hele zaak.
Zelfs als we niet de cirkels te zien omdat ze zo klein zijn.
Dus we zullen een kleine verandering om zich te ontdoen van de mensen in de volgende video.
Maar nogmaals we zijn klaar met functionaliteit, dus als je niet kan schelen om te zien dat je gewoon graag het maken van deze en u wilt om verder te gaan.
Ga je gang en ga naar de volgende eenheid.