Here at Cloudoki we came up with an idea for our #hackfridays: to make an theremin ♪♫ with an Arduino!
So here's how we did it.
Arduino Theremin
We looked inside our Arduino kit for a while and decided to use an LDR sensor and a piezo to create our theremin.
Requirements:
- Arduino
- LDR
- Piezo
- Resistor
- Arduino IDE
The Circuit
So we setup our theremin following the Fritzing circuit above, resulting on the image bellow.
Outside #hackfridays ftw
The code:
int val = 0;
const int piezoPin = 6;
void setup() {
pinMode(piezoPin, OUTPUT);
delay(3000);
}
void loop() {
digitalWrite(piezoPin, HIGH);
delayMicroseconds(val);
val = 4 * analogRead(A5);
digitalWrite(piezoPin, LOW);
delayMicroseconds(val);
}
After running the code the piezo will start playing after 3 seconds, when you move your hand above the LDR to block the light and achieve different light intensities on it, the result is close to an actual theremin.
But how can we improve this?
How about we use Web Audio API and Johnny-Five for the sound part instead of the piezo and add a canvas to visualize it... Sound interesting, right? Let's do this.
Note
You may need to go to File > Examples > Firmata > StandardFirmata and upload it to Arduino in case you run into error connecting Johnny-Five with the Arduino.
So now we removed the piezo from the setup and ended up with the following:
Back to the office
The Node Code
We'll need Johnny Five to connect to the Arduino, use ExpressJS to serve our app and Socket.io to send the values to the Web Audio API.
var express = require('express');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var five = require("johnny-five");
var board = new five.Board();
app.use('/', express.static('public'));
board.on("ready", function() {
var sensor = new five.Sensor("A5");
sensor.on("change", function() {
io.emit('new input', this.fscaleTo(0, 10000));
});
});
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
The Client side Code
We need to get the AudioContext. Create an oscillator node to generate our theremin notes, an analyser node to create the visalizer and a gain node for volume control. And of course we need Socket.io to get the values from the Arduino.
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var oscillator, analyser, gainNode;
// Socket io
var socket = io();
socket.on('new input', function(value){
// console.log(value, typeof value);
if (typeof value === "number") {
oscillator.frequency.value = value;
}
});
function init() {
gainNode = audioCtx.createGain();
analyser = audioCtx.createAnalyser();
// connect oscillator to gain node to speakers
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
oscillator.connect(gainNode);
gainNode.connect(analyser);
analyser.connect(audioCtx.destination);
// create initial theremin frequency and volume values
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var maxFreq = 6000;
var maxVol = 0.02;
var initialFreq = 0;
var initialVol = 1;
// set options for the oscillator
oscillator.type = 'square';
oscillator.frequency.value = initialFreq; // value in hertz
oscillator.detune.value = 100; // value in cents
oscillator.start(0);
gainNode.gain.value = initialVol;
function draw() {
var canvas = document.getElementById("canvas_audio");
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var ctx = canvas.getContext("2d");
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgb(128, 255, 0)';
ctx.beginPath();
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;
for (var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var y = v * HEIGHT / 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
x += sliceWidth;
}
ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();
window.requestAnimationFrame(draw);
}
draw();
}
init();
All that's left to do is build a nice web page for it and you are done. Or are you?
Is this enough?
We need something more... I know!!! Control the voice pitch with it.
So now we'll need to get the microphone audio input and change its pitch (we'll use one of cwilso Audio-Input-Effects scripts for that).
We'll add the code to get usermedia and modify the init function to allow changing from synthesizing mode and voice mode:
New Code
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var effect, mode;
// mute button
var mute = document.querySelector('.mute');
mute.onclick = function() {
if(mute.getAttribute('data-muted') === 'false') {
analyser.disconnect(audioCtx.destination);
mute.setAttribute('data-muted', 'true');
mute.innerHTML = "Unmute";
} else {
analyser.connect(audioCtx.destination);
mute.setAttribute('data-muted', 'false');
mute.innerHTML = "Mute";
}
};
// Socket io
var socket = io();
socket.on('new input', function(value){
// console.log(value, typeof value);
if (typeof value === "number") {
if(mode == "voice" && effect.setPitchOffset) {
effect.setPitchOffset(value);
}
if(mode == "synth") {
oscillator.frequency.value = value;
}
}
});
// mode button
var playingMode = document.querySelector('.mode');
playingMode.onclick = function() {
if(mute.getAttribute('data-muted') === 'true') {
analyser.connect(audioCtx.destination);
mute.setAttribute('data-muted', 'false');
mute.innerHTML = "Mute";
}
if(playingMode.getAttribute('data-mode') === 'voice') {
playingMode.setAttribute('data-mode', 'synth');
playingMode.innerHTML = "Voice Input";
if(analyser)
analyser.disconnect(audioCtx.destination);
init(undefined, "synth");
} else {
analyser.connect(audioCtx.destination);
playingMode.setAttribute('data-mode', 'voice');
playingMode.innerHTML = "Synth Input";
if(analyser)
analyser.disconnect(audioCtx.destination);
if (!navigator.getUserMedia) {
alert('Your browser does not support the Media Stream API');
} else {
navigator.getUserMedia(
{audio: true, video: false},
function (stream) {
var audioSource = audioCtx.createMediaStreamSource(stream);
init(audioSource, "voice");
},
function (error) {
alert('Unable to get the user media');
}
);
}
};
}
function init(audioSource, newMode) {
mode = newMode;
socket.emit("change_mode", mode);
// create Oscillator and gain node
if(mode == "synth") {
oscillator = audioCtx.createOscillator();
}
...
analyser.getByteTimeDomainData(dataArray);
switch(mode) {
case "synth":
oscillator.connect(gainNode);
break;
case "voice":
effect = new Jungle(audioCtx);
effect.output.connect(gainNode);
audioSource.connect(effect.input);
break;
}
gainNode.connect(analyser);
analyser.connect(audioCtx.destination);
...
var initialFreq = 0;
var initialVol = 1;
// set options for the oscillator
if(mode == "synth") {
oscillator.type = 'square';
oscillator.frequency.value = initialFreq; // value in hertz
oscillator.detune.value = 100; // value in cents
oscillator.start(0);
}
...
draw();
}
init(undefined, "synth");
Arduino + Nerd + Nerf = happy #hackfridays
You can get the full code here.
See you on the next blog post!