Keylight
August 10, 2010Hakim El Hattab
- http://www.hakim.se/experiments
- Location:
- Stockholm, Sweden
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
A playhead travels between keys which resonate in different sounds depending on where they are placed.
The current state is always kept in the URL so that your tune can be shared or saved.
Technology:
Canvas, JavaScript
Comments
http://hakim.se/experiments/html5/keylight/03/#204x270_244x268_281x456_251x450_340x532_383x535_416x459_666x408_702x398_778x376_819x376_641x320_611x319_573x279_163x464_192x468_243x413_270x412_338x376_372x379_422x319_651x466_692x469_615x408_579x414_553x371_523x376_486x321_466x270_436x267_508x475_464x473_456x548_517x546_573x477_649x404_733x408_741x374_701x379_693x331_736x321_712x271_3
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#494x181_497x225_500x256_503x309_506x359_507x403_503x459_504x501_503x571_507x608_500x658_500x708_498x764_501x859_501x923_502x978_468x979_431x953_409x901_397x818_414x739_456x704_474x689_522x683_571x644_623x616_654x606_702x576_734x558_746x513_770x479_787x406_802x346_814x273_827x234_817x184_827x163_802x158_764x161_743x163_727x163_709x161_687x163_652x161_631x161_606x161_577x161_552x158_531x158_514x159_499x161_6
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#293x303_297x349_299x391_301x423_307x474_321x309_343x344_328x376_343x413_359x439_404x313_391x338_390x406_417x353_428x319_441x346_453x379_483x308_509x358_547x316_574x349_600x293_651x263_656x371_692x281_679x309_705x373_670x269_657x315_656x408_719x414_656x286_660x344_688x341_402x589_422x584_426x621_404x630_405x734_409x778_436x783_432x736_531x576_569x576_601x616_588x652_559x688_583x729_620x795_631x854_574x861_502x336_564x334_587x331_533x341_387x373_771x264_772x306_772x352_789x388_798x348_804x306_798x268_751x269_744x306_749x347_766x386_777x434_788x439_787x462_774x456_789x326_763x326_761x286_787x294_402x589_6
Reply to this commentomg this is so fun! love it! (:
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#607x162_764x162_677x807_673x384_298x542_264x608_334x648_367x568_65x926_4
Reply to this commentBybjynnhthnjjyyh
Reply to this commentYou Tube! http://hakim.se/experiments/html5/keylight/03/#288x306_299x348_312x394_324x436_345x394_356x343_367x293_322x489_322x528_414x363_389x411_403x486_447x507_485x483_503x411_477x364_446x354_538x353_541x386_544x438_550x489_575x499_608x499_651x496_645x446_645x394_637x336_244x643_288x641_339x639_374x643_318x688_318x741_322x804_322x859_403x671_407x729_413x789_413x843_439x853_472x858_503x853_506x794_505x736_499x683_527x676_531x714_535x768_537x804_539x848_553x668_574x684_595x729_576x766_598x799_603x845_572x849_633x669_636x709_641x758_646x811_651x856_679x853_714x854_742x858_671x759_694x763_721x763_656x661_678x656_706x663_3
Reply to this commenthttp://is.gd/j33mq
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#140x558_181x493_244x450_288x412_337x393_393x385_457x388_519x422_576x483_618x540_656x592_691x630_734x645_791x655_797x590_797x538_797x495_797x447_783x457_748x475_716x488_684x508_653x537_602x578_570x604_544x628_508x678_470x719_424x757_151x613_187x647_233x690_287x715_330x747_377x758_278x475_302x525_308x575_306x622_298x667_222x527_184x320_173x347_183x377_209x370_218x327_206x317_136x497_137x452_157x422_163x525_224x353_287x225_289x245_300x252_311x243_310x224_299x215_18x930_63x930_107x933_158x935_211x938_274x934_362x928_453x928_529x925_610x922_685x926_762x920_826x910_909x916_899x833_874x780_861x725_867x677_879x632_881x580_870x538_3
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#812x123_664x124_726x124_756x123_744x167_818x122_787x199_722x203_693x202_722x201_802x199_804x98_656x124_718x124_749x123_736x168_795x123_648x124_709x126_742x124_728x168_2
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#194x614_212x571_227x524_198x614_214x568_225x521_276x534_329x534_392x534_425x538_272x581_321x581_378x584_432x584_198x628_214x564_232x521_1
Reply to this commentرائع جداً لعبة يصممها عربى ادعو لك الله بالتوفيق وأن يجعلك من النافعين دائماً هل يمكننى معرفة بعض المعلومات عنك وكيفية التحاق
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#190x367_249x366_290x495_347x258_387x494_444x369_510x489_567x251_616x489_669x363_720x491_755x258_807x494_841x371_3
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#307x148_296x121_272x110_258x130_256x176_266x206_284x227_353x184_342x217_330x247_322x264_353x239_370x251_388x203_381x231_368x276_362x299_441x209_439x240_437x274_432x308_442x209_464x218_477x231_468x251_451x261_460x278_470x299_545x225_531x239_520x260_518x291_527x322_549x321_565x297_566x269_558x241_595x335_598x312_604x283_612x257_631x298_626x279_644x289_657x276_656x303_653x324_650x355_697x289_699x311_699x338_698x362_714x359_731x358_698x324_711x324_727x323_697x293_709x291_723x289_309x152_297x123_272x109_258x131_255x178_266x206_268x204_286x230_308x148_298x126_273x114_260x132_257x179_259x177_268x209_287x234_994x4_962x1_964x55_990x49_994x9_961x3_961x58_991x46_990x12_967x4_964x56_987x51_994x10_961x2_963x54_990x9_962x26_962x26_962x29_978x29_6
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#411x381_409x497_587x492_586x381_499x336_498x538_500x431_926x224_949x223_966x257_948x297_926x290_919x260_50x285_58x241_83x248_93x286_86x317_67x311_383x382_377x495_619x493_613x381_499x308_499x581_516x466_354x378_347x493_649x495_639x379_501x279_500x628_537x503_324x377_320x493_681x497_669x386_501x257_500x683_560x542_299x377_292x492_710x497_697x382_501x243_502x730_582x582_276x375_266x493_736x502_722x400_502x216_501x773_599x615_249x375_241x497_762x501_754x386_501x208_504x835_619x643_224x373_211x498_791x505_780x387_503x190_506x892_644x682_182x898_133x865_200x800_177x710_254x692_258x605_311x590_321x528_366x478_362x418_396x397_402x347_426x331_426x295_449x282_450x243_471x228_466x203_482x201_483x172_498x168_503x148_514x153_523x132_537x135_544x120_553x130_561x109_569x130_581x113_590x132_602x117_611x143_625x133_627x153_645x150_643x168_662x170_657x192_676x192_670x215_691x218_680x245_704x246_688x275_710x282_692x315_714x325_691x358_717x367_694x407_726x428_693x453_722x467_694x515_717x563_677x567_709x626_658x619_681x680_614x703_653x775_562x788_608x900_466x852_500x983_378x873_349x968_284x855_278x768_209x620_174x508_161x400_180x293_214x215_257x197_313x205_346x244_333x295_290x310_136x257_359x55_370x67_382x52_392x72_403x58_417x77_433x60_441x77_454x58_464x80_477x62_486x88_498x68_514x43_522x73_522x92_539x78_549x49_562x77_560x98_577x80_592x53_601x85_797x103_853x122_883x205_874x265_858x342_873x370_900x360_889x418_887x465_882x527_793x642_827x596_874x586_785x702_811x755_655x889_826x877_741x775_984x872_929x976_467x381_460x372_447x350_407x282_393x267_388x260_6
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#391x380_622x693_507x538_606x392_403x687_510x545_620x552_393x552_513x547_516x407_516x687_517x540_2
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#704x175_855x250_675x252_818x732_773x733_648x882_611x823_573x887_541x822_506x892_465x822_411x637_236x638_169x752_126x752_2
Reply to this commentIron man
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#203x413_233x413_231x463_204x417_183x578_217x527_207x419_237x418_234x468_210x420_167x692_206x608_208x420_237x420_120x928_146x803_171x692_191x608_191x480_166x520_240x530_251x497_194x422_228x472_196x403_338x183_2
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#392x372_643x569_373x352_365x362_573x610_352x392_345x400_336x412_625x603_355x437_375x457_385x447_393x440_398x427_409x415_415x405_445x425_438x435_633x583_422x460_414x472_619x620_613x644_415x450_470x450_463x465_454x482_454x485_445x506_443x514_455x522_467x533_475x534_482x530_489x522_501x505_507x483_509x474_511x470_503x462_499x458_498x453_488x450_487x452_473x452_499x507_541x493_532x506_528x522_514x550_505x567_544x515_547x534_521x537_556x560_637x672_658x587_621x657_579x578_434x447_571x539_342x425_583x536_667x595_637x617_585x540_494x422_550x565_406x485_516x434_630x666_650x630_431x455_361x378_654x580_583x556_508x422_563x549_576x590_544x580_551x554_403x440_382x361_6
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#518x550_820x167_987x992_8x988_183x168_512x167_343x167_706x170_608x172_838x242_839x282_850x310_851x347_861x378_877x450_879x478_890x515_903x560_911x593_911x617_921x648_928x692_929x688_936x727_938x760_944x783_946x808_953x843_966x888_971x925_981x955_446x12_474x40_502x63_540x38_591x18_617x7_6
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03b/#678x763_585x537_688x216_547x609_241x717_71x860_458x879_138x565_112x701_223x878_341x873_343x704_468x709_243x548_334x559_480x569_573x558_560x587_564x573_571x561_581x546_477x474_348x468_242x481_148x474_6
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#476x189_476x234_477x283_476x306_476x354_475x403_474x452_474x491_476x486_526x188_552x188_528x356_558x358_530x409_557x409_586x359_596x313_612x311_596x291_612x288_590x236_606x238_596x193_1145x427_6
Reply to this comment
Reply to this commentvery good
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#800x520_250x698_290x660_200x698_40x784_58x570_81x784_510x698_220x660_298x570_220x660_20x698_120x698_220x698_750x520_250x698_290x660_200x698_40x784_58x570_81x784_510x698_220x660_298x570_220x660_20x698_750x880_450x880_250x880_130x880_10x880_310x880_10x880_390x880_220x784_110x698_220x784_110x880_650x880_800x880_400x934_600x880_140x784_158x570_181x784_510x698_220x660_298x570_450x660_20x698_900x698_450x698_30x698__900x698_450x698_30x698_900x698_450x698_30x698_2
Reply to this commentLove song
Reply to this commenti wnt
Reply to this commentAdded a little more.
http://bit.ly/b4J0Bm
Reply to this commentOde to Joy
http://bit.ly/9zhp9Y
Reply to this commenti just made Ode to Joy on this thin then i ran out of space to continue the symphony
Reply to this commentBiggest problem: It eats up your browser history... every dot is another page, every speed change is another page, so after a little time playing with that it kinda added A LOT to my web history.
Reply to this commenti love fantastic......love,I
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#822x808_851x601_839x426_849x489_721x603_681x601_642x498_610x426_550x606_450x604_410x972_322x808_108x711_757x804_816x601_806x424_817x491_756x599_702x604_620x501_584x424_519x606_146x881_154x809_163x711_113x599_3 Mario! timing sucks though
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#800x520_250x698_290x660_200x698_40x784_58x570_81x784_510x698_220x660_298x570_220x660_20x698_120x698_220x698_750x520_250x698_290x660_200x698_40x784_58x570_81x784_510x698_220x660_298x570_220x660_20x698_750x880_450x880_250x880_130x880_10x880_310x880_10x880_390x880_220x784_110x698_220x784_110x880_650x880_800x880_400x934_600x880_140x784_158x570_181x784_510x698_220x660_298x570_450x660_20x698_900x698_450x698_30x698__900x698_450x698_30x698_900x698_450x698_30x698_2
Reply to this commentI can't hear anything...
Reply to this commentaweeeeeeeeeeeeeeeeeesom
Reply to this commentcomo lo pongo ?
Reply to this commentnice!! i did the ABC :D
Reply to this commenthttp://hakim.se/experiments/html5/keylight/03/#478x397_711x505_193x168_999x17_991x206_991x385_496x413_516x430_902x7_13x990_83x987_151x987_10x888_11x798_97x865_223x162_990x460_513x155_460x142_556x155_733x416_490x158_540x462_481x822_517x818_557x815_494x775_538x772_510x713_886x980_929x950_972x962_886x928_969x902_910x863_22x373_70x378_98x393_109x303_76x300_24x290_627x68_645x59_663x62_665x83_638x62_635x90_650x83_270x406_286x405_307x402_308x365_287x372_269x375_747x565_772x560_800x558_794x512_747x522_765x480_194x28_271x678_290x618_334x600_378x618_388x695_361x758_310x767_270x738_330x689_3
Reply to this commentWOW that is amazing... looks kinda like Ball Droppings
Reply to this commentOkay keylite is awesome.. What started out as a inquisitive look turned into 2 hours of fun. I accidentally dragged one of the balls while it was the next note to play, and the blue line chased after it. Suddenly it bacame a fun game to play on top of something really cool just to do.
Reply to this commentFreaking awesome!!! Any time you can mix games, music, and pretty colorful lights, you can't lose!
Reply to this commenti like it, am trying to compose song, and its fun.. amazing!
Reply to this commentKereeen!
Reply to this commentiya keren banget
Reply to this commentNo sirve.
Reply to this commentvery nice
Reply to this commentvery very good we like a lot thank you!
Reply to this commentI seems, I saw that on Silverlight.
Reply to this commentMine looks like gmail! :) http://goo.gl/sqoy
Reply to this commentWorks best on speed 6
http://hakim.se/experiments/html5/keylight/03/#373x314_371x504_556x518_551x314_470x423_379x319_557x318_561x523_374x504_6
Reply to this commentMine is: http://hakim.se/experiments/html5/keylight/03/#373x314_371x504_556x518_551x314_470x423_379x319_557x318_561x523_374x504_6
wow :DD
Reply to this commentis it the sound of Gamelan from Indonesia? very2 nice :)
Reply to this commentI don't seem to get any sound, Using ubuntu 10.04 and chrome 6.0x beta.
Reply to this commentWorship my noodily appendage!!!
Reply to this commentI LOVE LOVE LOVE dragging a dot around as it is about to be played, making the line chase after it :D
Reply to this commentMath.pow(creative,10), very cool, thank you!
Reply to this commenti like that heart in keylight
Reply to this commentUnbelievable...
Reply to this commentFantastic! I can spend a lot of time on this ...
Reply to this commentMan thiz iz awesome!
Reply to this commentI"ve noticed that if you drag a key outside the bottom left or right corner it reaches a kind-of singularity. If you drag it close to the singularity the size of the key, playhead and dust effects increase dramatically. If it reaches the singularity, the experiment crashes.
Reply to this commentThanks for the detailed info! This has been fixed and won't cause any more crashes.
Reply to this commentWonderful! Thanks for sharing this, Hakim.
Reply to this commentAwesome
Reply to this commentAmazing! The best experiment.
Reply to this commentIt tends to crash when you put everything in the same place... nice job though! Innovative!
Reply to this commentThis is wonderfully creative. First class, and my new top pick!
Reply to this commentDude, best experiment yet! Very very neat! 5 stars for sure.
Reply to this commentA bit CPU-intensive, but fantastic.
Reply to this commentIt does eat up a lot of CPU, mostly because the sound effects are generated/synthesized through code at runtime rather than playing audio files from the server.
Reply to this commentGreat work & beautiful UI. I Think it's the first time I see a such advanced javascript sound application. Keep it up! (a single click would have been better although ;) )
Reply to this comment