Break string into chars and attach sounds to each char using JavaScript / jQuery

Problem

I have have a string stored in a MySQL database.

I want to pull the string from the database, break it into char elements and attach sound files to each letter. The letters will be displayed in a web page and when clicked, will play a sound which represents that letter.

I have tried using the .split() function, but have not had much success. Has anyone seen anything similar to this or does anyone have any suggestions?

Problem courtesy of: skad

Solution

var char = [],
    str, // your string
    i,
    len = str.length
for (i = 0; i < len ; i++){
    char[i] = str.charAt(i);
}

// now you have an array of characters

// setup event handlers for the click action

// setup audio output
Solution courtesy of: user1637281

Discussion

To pull of the split its relatively simple, you can use traditional JS, or jQuery, all you need to do is plug in your markup generation to the below.

var str = "No clue what you are trying";
for (var x = 0; x < str.length; x++){
    var myC = str.charAt(x);
    //or var myC = str[x];
    //what do you want to do?
}

//jQuery overkill
$.each(
    str.split(''),
    function( idx, myC ){
        //what do you want to do?
    };
);
Discussion courtesy of: Nix

If I look here

Sound effects in JavaScript / HTML5

you can try

var chars = "<? echo $string; ?>".split("");
var sounds = [];
$.each(chars,function(i,char) {

  if (!sounds[char]) sounds[char] = new Audio(char+".wav"); // buffers automatically when created
  $("#container").append('<a href="#" onclick="sounds[this.innerHTML].play();return false">'+char+'</a>');
});
Discussion courtesy of: mplungjan

This recipe can be found in it's original form on Stack Over Flow.