Virtual Piano was my first time working with Socket.IO! I got the chance to learn about web sockets and apply what I learned to develop a fun, musical application. What I LearnedĮvery hackathon I attend, I challenge myself to learn a new skill and build something with it right away. other-active) over the corresponding key to show that it has just been played by someone else!Ī green gradient indicates someone else has played the key. This function plays the note through Audiosynth and displays a green gradient (in CSS class. Initialize Audiosynth instrument // var piano = Synth.createInstrument('piano') //. When you press a key, jQuery triggers the following event handler: Matching the piano layout, the keys in the top row, W through P, map to black keys from C#3 to D#4. The keys in the middle row of a QWERTY keyboard, A through ', map to white keys from C3 to F4. There are two ways to play a note-you can either click a key with your cursor or press keys on the keyboard. ![]() When you log onto Virtual Piano, you're greeted with a simple HTML and CSS keyboard. The frontend is written using jQuery and Audiosynth, a Javascript library that synthesizes digital instrument sounds, and vanilla HTML and CSS. Virtual Piano is built with Node.js and Socket.IO, an engine for real-time communication. Over the 24-hour hackathon, I built a demo of a virtual piano that allows multiple people to play from separate devices. Just log on, join a session, and then start making music as if you were in the same room. I envisioned a browser-based app that lets musicians start jamming together, no matter where they're located. ![]() We're now capable of messaging and even video calling our friends online-what if we could also make music together? The magic of the Internet is that it can connect people anywhere around the world, at any time. I created Virtual Piano at 2017, drawing inspiration from the browser-based experiments in Google's Chrome Music Lab.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |