Week 2 at RC - linking data to sound

Week 2 at RC has been spent making some creepy synthy wind chime-sounding things in d3. Roll your mouse over the bars and some discordant sounds will play! I used a library called riffwave.js to generate a sound that scales according to the length of the bars. For some reason the site where I got riffwave from seems to have disappeared). There also wasn’t a whole lot information about how to use it in the first place. However, I found this useful SO answer describing how to use riffwave.js to output sounds of a specified frequency. I used d3’s .scale method to create a linear scale that maps input values (using .domain) to a sound between 27 and 900 hz (the output .range):

1
2
3
var pianoScale = d3.scale.linear()
		.domain([0, d3.max(dataArray)])
		.range([27, 900]);

Then in the myMouseoverFunction, feeding in the following plays the audio:

1
2
var audio = simHertz(pianoScale(data));
audio.play();

I used sounds between 27 and 900 hz because they sounded the nicest. I originally had 27 to 4186 hz, mimicking an 88 key piano scale, but the higher notes sounded horrible and screechy.

Changing the input data produces some interesting shapes and sounds. Here is a log curve:

and my favourite, a modified sine wave:

Endless hours of fun! I tried encoding a tune with this but I think the output sound frequencies are lies, as it sounded really off. Props to Javier who helped a lot with getting the mouseover stuff working correctly. Code for this project is available here, or, if you want the exact code I used on this site, here.

Other stuff I did this week: