Jingle bells

We’re back with a Makey Makey installation and 10 LEDs today! We’ll try to add sound this time, though, playing a very well-known Christmas tune.

bells_hero

You’ll need:

  • 10 mixed LEDs
  • Arduino UNO
  • Makey Makey
  • Breadboard + wires + alligator clips
  • 10 small bells
  • Conductive tape

1) The setup
I think the hardest bit in this hack is sourcing the bells sounds to play the tune! Once you’ve found a convenient one, you’ve got to export 10 notes to be able to play it (or even go freestyle!)
bells_setup

I have re-used yesterday’s setup, replacing all the LEDs by various, smaller ones and adding an extra one on the top row. I’ve also laid out some small bells on the conductive tape (they are metallic, so they will be conductive and enable Makey Makey to detect a key press).

I am going to use BreakoutJS again; if you’d like to know a bit more, I went into more details in the Whack-a-Grinch post.

Once the sounds are sorted, add them in audio tags in the body of your HTML file, like so:

<audio class="soundSP">
        <source src="sound/DO.mp3" type="audio/mpeg">
    </audio>
    <audio class="soundRT">
        <source src="sound/RE.mp3" type="audio/mpeg">
    </audio>
    <audio class="soundDN">
        <source src="sound/MI.mp3" type="audio/mpeg">
    </audio>
    <audio class="soundUP">
        <source src="sound/FA.mp3" type="audio/mpeg">
    </audio>
    <audio class="soundLT">
        <source src="sound/SOL.mp3" type="audio/mpeg">
    </audio>
    <audio class="soundW">
        <source src="sound/LA.mp3" type="audio/mpeg">
    </audio>
<audio class="soundA">
        <source src="sound/SI.mp3" type="audio/mpeg">
    </audio>
    <audio class="soundS">
        <source src="sound/DO2.mp3" type="audio/mpeg">
    </audio>
    <audio class="soundD">
        <source src="sound/RE2.mp3" type="audio/mpeg">
    </audio>
<audio class="soundF">
        <source src="sound/MI2.mp3" type="audio/mpeg">
    </audio>

I have associated the sound to the keyboard keys available on the Makey Makey, to make it easier.

2) Writing the logic
Now for the logic, we want the associated sound to be playing whenever a key is pressed. But we also want the LEDs to show us which keys to press to be able to play Jingle Bells.

To handle the sounds, I’ve written a class called Note:

function Note(note) {
	this.isPlaying;
	this.sound = $(note);
	this.init();
}

Note.prototype.startPlaying = function () {

	if(!this.isPlaying) {
		this.sound.trigger("click");
	}
};

Note.prototype.init = function() {
	var self = this;
	this.sound.click(function() {
		if (this.paused) {
			this.play();
			self.isPlaying = true;
		}
	});

	this.sound.bind('ended', function() {
    	self.isPlaying = false;
	});	
};

And I’ve then defined all the notes in my main Javascript file. Let’s breakdown all the functions for this tune player.

var IOBoard = BO.IOBoard;
    var IOBoardEvent = BO.IOBoardEvent;

    var host = "localhost",
        port = 8887,
        arduino;

    // Enable debug output
    BO.enableDebugging = true;

    arduino = new BO.IOBoard(host, port);
    var LED = BO.io.LED;

    var ledSP, ledRT, ledDN, ledUP, ledLT, ledW, ledA, ledS, ledD, ledF;


    var noteSP = new Note(".soundSP"); //DO
    var noteRT = new Note(".soundRT"); //RE
    var noteDN = new Note(".soundDN"); //MI
    var noteUP = new Note(".soundUP"); //FA
    var noteLT = new Note(".soundLT"); //SOL
    var noteW = new Note(".soundW"); //LA
    var noteA = new Note(".soundA"); //SI
    var noteS = new Note(".soundS"); //DO
    var noteD = new Note(".soundD"); //RE
    var noteF = new Note(".soundF"); //MI

    var currentNote_index = 0;
    var currentNote;

    var song;

    arduino.addEventListener(BO.IOBoardEvent.READY, onReady);

    function onReady(evt) {
        arduino.removeEventListener(IOBoardEvent.READY, onReady);
        init();
        $(document).keydown(detectKey);
    };


We set all the variables and Breakout.

function init() {
        ledSP = new LED(arduino, arduino.getDigitalPin(4));

        ledRT = new LED(arduino, arduino.getDigitalPin(5));

        ledDN = new LED(arduino, arduino.getDigitalPin(6));

        ledUP = new LED(arduino, arduino.getDigitalPin(7));

        ledLT = new LED(arduino, arduino.getDigitalPin(8));

        ledW = new LED(arduino, arduino.getDigitalPin(9));

        ledA = new LED(arduino, arduino.getDigitalPin(10));

        ledS = new LED(arduino, arduino.getDigitalPin(11));

        ledD = new LED(arduino, arduino.getDigitalPin(12));

        ledF = new LED(arduino, arduino.getDigitalPin(13));

        song = [ledA, ledA, ledA, ledA, ledA, ledA, ledA, ledD, ledLT, ledW, ledA, ledS, ledS, ledS, ledS, ledS, ledA, ledA, ledA, ledA, ledW, ledW, ledA, ledW, ledD, ledA, ledA, ledA, ledA, ledA, ledA, ledA, ledD, ledLT, ledW, ledA, ledS, ledS, ledS, ledS, ledS, ledA, ledA, ledA, ledD, ledD, ledS, ledW, ledLT];


        switchLEDOn(song[currentNote_index]);


We then define all the Arduino pins for the LEDs, define the song and switch the first light on.

function switchLEDOn(led) {
        currentNote = led;
        currentNote.on();

        currentNote_index++;

        if(currentNote_index == song.length) {
            currentNote_index = 0;
        }
    }

We switch the LED on and get prepared to move to the next when the function is called again.

function switchLEDOff() {
        currentNote.off();
        setTimeout(function(){
            switchLEDOn(song[currentNote_index]);
        }, 50);
    }


Switch the LED off and wait for a bit before turning the next one on (that way if the same note has to be played twice, it will be more obvious).

function detectKey(event){
            var unicode=event.keyCode? event.keyCode : event.charCode;

            switch(unicode)
            {
                case 87: //W
                    noteW.startPlaying();
                    if(currentNote == ledW){
                        switchLEDOff();
                    }
                    break;
                 
                case 65: //A
                    noteA.startPlaying();
                    if(currentNote == ledA){
                        switchLEDOff();
                    }
                    break;
                 
                case 83: //S
                    noteS.startPlaying();
                    if(currentNote == ledS){
                        switchLEDOff();
                    }
                    break;
                 
                case 68: //D
                    noteD.startPlaying();
                    if(currentNote == ledD){
                        switchLEDOff();
                    }
                    break;
                 
                case 70: //F
                    noteF.startPlaying();
                    if(currentNote == ledF){
                        switchLEDOff();
                    }
                    break;

                case 32: //Space
                    noteSP.startPlaying();
                    if(currentNote == ledSP){
                        switchLEDOff();
                    }
                    break;
                     
                case 38: //up
                    noteUP.startPlaying();
                    if(currentNote == ledUP){
                        switchLEDOff();
                    }
                    break;
                     
                case 40: //down
                    noteDN.startPlaying();
                    if(currentNote == ledDN){
                        switchLEDOff();
                    }
                    break;
                     
                case 39: //right
                    noteRT.startPlaying();
                    if(currentNote == ledRT){
                        switchLEDOff();
                    }
                    break;  
                     
                case 37: //left
                    noteLT.startPlaying();
                    if(currentNote == ledLT){
                        switchLEDOff();
                    }
                    break;      
            }
        }


Play the associated note on key down, check if that note is supposed to be played, if yes move to the next one.

3) Jingle all the way!
That’s it! Pretty easy, here’s a little demo. You just have to hold the alligator clip connected to the earth on the Makey Makey in one hand, and play with the other!

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