Playing piano keys after delay in JavaScript

Question

I was trying to write a script to 'play' some keys on this online keyboard by using JavaScript to 'click' the keys for me.

The code

//sample array to iterate over
var keys_ = ['et', 'dst', 'et', 'dst', 'et', 'b', 'dt', 'ct', 'a', ...];

//handles the clicking only
function playKey(id_) {
    key_ = document.getElementById(id_);
    key_.click(); }

//iterates over the array
function playKeys(keys_) {
    delay = 1000;
    for (i = 0; i < keys_.length; i++) {
        console.log(delay);
        key_ = keys_[i];
        console.log(key_);
        window.setTimeout('playKey(key_)', delay);
        delay += 1000; 
        } 
    }

The output

The console throws the following error:

1000
et
2000
dst
...
9000
a
undefined
Uncaught TypeError: Cannot read property 'style' of null p-ano.html:142
8 Uncaught TypeError: Cannot call method 'click' of null

As you can see, the delay and key_ values are perfectly correct. But still when I execute this, after a second (i.e., the 1^st timeout), all the keys seem to play at once and then nothing happens.

What am I doing wrong?

P.S.: I've seen other questions like this one and searched Google and other forums, to no avail

Answer 1

Learn about closures.

window.setTimeout(function(){ playKey(key_); }, delay);

and you have a problem with globals and locals. Use var!

The way I would write it would be

( function() {
    var keys_ = ['et', 'dst', 'et', 'dst', 'et', 'b', 'dt', 'ct', 'a'],
        delay = 250,
        currentIndex = 0,
        playKeys = function () {
            document.getElementById(keys_[currentIndex]).click();        
            currentIndex++;
            if (currentIndex<keys_.length) {
                window.setTimeout(playKeys,delay);
            }    
        };    
    playKeys();
})();

Answer 2

Huh? There's already a built-in function called playstr().

function playstr(instr) {
    keystr = instr;
    time = 0;
    k = 0;
    for (i = 0; i < keystr.length; i++) {
        setTimeout("playkbd(keystr[k])", time += 50);
        setTimeout("k++", time + 50);
        setTimeout("cb()", time += 200);
    }
}​

Try pressing 'z', 'x', or 'm' to run them.

if (key=="z")
  playstr("wetyuyuju     ujo..juyyuj..uyttfy..yuytft     ujp..o;poko     opoj..uy\
  uju     ujo..juyyuj..uyttfy..yuytft     w e t y u y uoj u ")

if (key=="x")
  playstr("tgtdtgtdtgghhgtdd              tgtdtgtdtgghhgtdd              djjjkjhh\
  jhghjhg djjjkjhhjhghjhg djjjkjhhjhghjhg djjjkjhhjh     tgtdtgtdtgghhgtdd")

if (key=="m")
  playstr("         k j y j k j y f e f e a e f y j k j y j k j y f e f e a e f y\
   j k j y j k j y f e f e a e f y j k j y j k j y f e f e a e f y j ")

I am running a mirror and want to know how to auto-play chords.

// F F 1 F A N F A R E 

if (key==".") {
  setTimeout("playstr('u y u yo ok ok ku y g yf   u y u yo ok ok ku y u op ')",100)
}

Answer 3

I am assuming the code you have posted is exactly what you are running. In this case the three dots are illegal.

keys_ = ['et', 'dst', 'et', 'dst', 'et', 'b', 'dt', 'ct', 'a', ...]

Try removing them like

keys_ = ['et', 'dst', 'et', 'dst', 'et', 'b', 'dt', 'ct', 'a']

Also, as a tip, try writing cleaner javascript. Use var before declaring variables. End your statements with ; semi-colons.