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.

Image

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.

Image

Next I put all the audio ids into an array.

Image

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:

http://lukemonetdesigns.com/keyboard/indexfinal.html

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:

http://www.patatap.com/

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 :http://www.patatap.com/ [Accessed 26.3.2014]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s