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

Question

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?

Can you paste what you tried? Are you just trying to break up : 'whatagreatsong' into w h a t ... ? — Nix, Jan 05 '13 at 15:51
Showing us your could make it easy to suggest solution. Why split did not help you? — Adil, Jan 05 '13 at 15:53

score 1 · Accepted Answer · answered Jan 05 '13 at 15:57

1

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

answered Jan 05 '13 at 15:57

This seems very helpful. If I break 'AND' into 'A' 'N' 'D'. How could I attach the correct sound to each char dynamically? Somthing like, if(char[i] == ('a'){ char[i].playclip(a) } Am I roughly on the right track? Sorry, Im pretty new to javaScript. – skad Jan 05 '13 at 16:37
you said "when clicked" so you would need to set up event handlers for a click event. Also you need need to setup and element for each letter. – Jan 05 '13 at 17:35

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

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>');
});

edited May 23 '17 at 11:56

Community

1
1

answered Jan 05 '13 at 15:58

mplungjan

169,008
28
173
236

Can you edit your answer and explain how this answers the question? – Jonas G. Drange Jan 05 '13 at 16:16
I've always thought avoiding automatic flagging due to length is a good thing. – Jonas G. Drange Jan 05 '13 at 16:57
Your answer, originally, was flagged by bots for being too short. Probably because of the answer being 100% one code block. The traits of a good answer is show and tell, not just show. – Jonas G. Drange Jan 05 '13 at 17:03

Nix · Answer 3 · 2013-01-05T15:59:30.453

0

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?
    };
);

edited Jan 05 '13 at 15:59

answered Jan 05 '13 at 15:53

Nix

57,072
29
149
198

I'm afraid that playing a song is not a synchronous operation => your approach won't work. – John Dvorak Jan 05 '13 at 15:58

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

3 Answers3