Question

Here is a link to my code: http://jsbin.com/ebadic/9/edit

It is from a demo I found here (this links explains how it works, the part i’m using is at the bottom):

http://www.html5rocks.com/en/tutorials/casestudies/jamwithchrome-interaction/

It creates 6 guitar strings. What I would like to do is have a sound play when one of the 6 strings is moused over – A different sound for each string, or a single sound that is pitched up/down for each string (perhaps using the playbackRate attribute)

My code already plays a sound when I mouseover a single string, but the problem is that it plays the same sound for each one. How do I make it play a DIFFERENT SOUND for each string?

Answer 1

You call strum() here:

Stage.prototype.checkPoint = function(x, y, zone) {
    if(zone.inside(x, y)) {
        zone.string.strum();
    }
};

Why not add an <audio> identifier here?
I suppose the sound you want to play depends on the x and y coordinates?

Stage.prototype.checkPoint = function(x, y, zone) {
    if(zone.inside(x, y)) {
        zone.string.strum(getAudioID(x, y));
    }
};

How you fill in the getAudioID(x, y) is up to you (I am no musician, so I really do not know 🙂 )

Of course you’d need to change the strum() method as well to something like this:

GuitarString.prototype.strum = function(audioID) {
    this._strumForce = 5;
    document.getElementById(audioID).play();
};

(Up to here fits nicely into your current design.)

---

A better approach is to add the audioID to your GuitarString class when you instantiate the guitar string objects. So each guitar string (object) uses its own audio track.

Even though this would require some bigger modifications to your code, I would advice to do it this way as it results in much clear and understandable code!

---

Also checkout Sound effects in JavaScript / HTML5 it shows how you can play audio tracks without using the <audio>-tag. This is particular useful when you have many audio fragments!