Using Text Data to Manipulate Images & Sound (pt. 2)

Following on from my previous experiment, my next idea was to use similar text-data to manipulate sound, as this would tie into our data-controlled MIDI concept.

What I created was a page which used the same functionality as the last one (creating coloured images which change depending on data), but accompanied by sound. Three 'notes' will appear onscreen at any one time. These notes are randomly selected from a range of numbers in a separate text document. Each of these numbers correlates to a sound file in another folder; the higher the number, the higher the sound. The sounds I used are royalty-free recordings of piano keys. These three notes will play at once when the page is loaded, forming a sort of chord, though due to the random nature of the note selection process this chord is usually rather discordant.

This project can be found here: http://dindins.web44.net/data%20stuff/test2.php

Initially the site would automatically refresh every few seconds so that the sounds would randomise continuously, but I removed this feature because I felt it was unnecessary and annoying. The page can be refreshed manually for the same result and a new 'chord' each time.

Below is a screenshot of the site in action:

As you can see, as with the previous test, the values extracted from the text file correlate to colour, as well as sound. The higher the number in the note's div tag, the more saturated/brighter the green. 

The next image will briefly explain how this was all achieved. The first section of code seen uses the same concatination approach as last time to style the colours of the div elements according to their note value. The second section shows how the audio files were launched. I used html5's audio tag functionality to add the sounds to the page. A similar method is used to the styling, where a random number is taken from the previously declared array, and related to a sound file with the same number in its filename.

This test suffers from the same 'undefined' issue that I experienced in the last one, but was otherwise quite successful. This test bridges the gap somewhat between our concepts of data gathering data and using music as an output or feature, as it utilises both of these ideas.