Animation Project: Keyboard Website with Sound

As we had the first version of the website working Luke Monet and I continued developing the idea in order to add sound to the interactive keyboard. Luke had the idea of adding sound to the website, which would be a notes to each of the letters with a pitch that corresponds to the notes in the Alphabet Song ( a song that is commonly used when teaching children the alpahbet.) At first I was apprehensive about the idea as the order of the notes would generally be quite mixed up, users of the site are not likely to press the keyboard keys in an alphabetic sequence, and thus the song would not be recognised, but I was willing to experiment to see how this worked.


As a function had been written already for the keyboard function, adding sound was relatively simple to do. After Luke had recorded the notes for each letter, I added the corresponding audio file to each of the different letter divs and preloaded them so they would load when the page is loaded and not when the div becomes visible.


Next I put all the audio ids into an array.


Now it was just the simple task of adding a play function to the existing code (using the j integer used previously to referance the id’s position in the array), before the Timeout.

Here is a link to the updated website:

Overall I think the audio adds more value to the website and makes the experience far more interesting to the viewer than without sound. My apprehensions about the song not being clear were unfounded as during testing we found it easy to pick up that the notes of the letters are linked to the song. This probably worked so well because the song is so well known and ingrained into our culture and has such a limited range in tone that it is instantly recognisible.

To continue this project we decided to look at some other sites for research. One that particularly caught our eye was Patatap a collaboration between Jono Brandel and the band Lullatone. Here’s a link to the site:

Like our site, this site uses keyboard inputs to play sound and animate visuals on screen. One of the things I thought was very effective about this site is the way that different effects stack on top of one another, so the effects and melodies mix together. I can tell that this would be quite challenging to recreate code-wise but I will look into learning how this was achieved as it is a new area of web design. which I believe has a lot of potential.

Brandel, J., 2014. Patatap [online], Avalable from : [Accessed 26.3.2014]


Animation Project: Interactive Picture Keyboard Website


Following on from the photography assignment, Luke Monet decided to continue developing the project and asked me to collaborate with him. The idea is an interactive website where the user would press a keyboard key and a photograph corresponding to that letter would appear on the site. Luke worked on the design and idea of the website and I helped him with the code to make it work.

As I had not coded a program like this before I started by creating a flow chart to help visualise how the program would work:

First step: User presses key

Second step: Key code pressed is logged

Third step: Key code is linked to photograph

Fourth step: Photograph is displayed

As each keyboard key relates to a keycode this can be used by the computer to relate to another event. However first the script must have an event listener to check when a key is pressed. I also added all the photographs into an array to store them. The photographs are hiden initally in css (display: none;) and arranged on top of one another using z-indexing. The function alphabet then listens for the window event. If it finds one it takes the key codeĀ  (luckily key codes are in alphabetical order or this method wouldnt work, I was being lazy and I should have used a more transferrable method to do this) and minuses 65 to get the array number of the photograph of the letter of the pressed key. It then changes the css display to block to show the letter. I realised after this there needed to be a timeout to this function to allow other letters to be pressed afterwards. I added one set to 500 which makes the photograph display for half a second.

Here is the code I came up with:


And here’s a link to the website:

There are a few bugs with the program, such as only the “top” letter being shown when two keys are pressed at the same time and the bottom one “sticking” and not disappearing till pressed again. I am not quite sure what causes this bug however I am pretty certain that the problem can’t be fully fixed without changing the method that the letters are hidden and displayed using css styles.

The next idea we would like to try is extending the typing feature to allow more letters to be shown, allowing sentences to be written. However the code for this would be completely different to the one above and the layout could be quite complicated, especially if the typing were to be done in real time and not direct the user to another page for the outcome. I can predict it would probably need to store the photographs a library of sorts and a grid system would have to be used to “put” the photographs onto space on the website whilst the user is typing, however I would need to do a lot of research and development before I could sucessfully realize this idea. Although the time scale of this project is probably too short to fully develop this, I would like to try this idea to furthern my programming skills and might work on it over the Easter break.

Another idea we had, which can be done on a much smaller timeframe is adding a sound that would be played each time a key is pressed. As this would probably only add a line or two of code to the one above, this should be quite easy to add in.