Dynamically Assign Listener to Button

Question

Dynamically Assign Listener to Button

You must Login before you can answer or comment on any questions.

I am working on my first project using Appcelerator: Soundboard.

I am using a while loop to create multiple buttons and assign event listeners to play sounds when button is clicked. Code below.

var buttons = new Array();
var sounds = new Array();
var snd = new Array();
 
sounds[0] = '../sounds/mrt/asus.wav';
sounds[1] = '../sounds/mrt/asus.wav';
sounds[2] = '../sounds/mrt/audio3.wav';
sounds[3] = '../sounds/mrt/audio5.wav';
sounds[4] = '../sounds/mrt/camera.wav';
sounds[5] = '../sounds/mrt/asus.wav';
sounds[6] = '../sounds/mrt/asus.wav';
 
var itemCount = sounds.length;
var i = 0;
var pos = 1;
while(i<(itemCount/2)) {
    var position = pos * 50;
    var btn_title = 'Button ' + i;
    buttons[i] = Ti.UI.createButton({ title: btn_title, opacity: btn_opacity, backgroundColor:btn_bgcolor, color:btn_textcolor, borderColor:btn_bordercolor, borderWidth:btn_borderwidth, height: btn_height, width:btn_width, borderRadius: btn_borderRadius, top: position, left:25 });
 
    win1.add(buttons[i]);
    buttons[i].addEventListener('click',function(e){ 
        snd[i] = Ti.Media.createSound({ url: sounds[i] }).play();                               //Issue here with assigning sounds
        Ti.API.info("Playing Sound: " + i + sounds[i] + ", snd " + i + " - " + snd[i]);         //Information
    });
    i++;
    pos++;
}

All the buttons are created just fine but all buttons are assigned with sound[5] only unless I manually enter the absolute file name of the .wav.

Trace Output below on multiple button presses:

[INFO] [134,18496] Playing Sound: 5../sounds/mrt/asus.wav, snd 5 - ti.modules.titanium.media.SoundProxy@44fa54b0
[TRACE] E/TiUIView( 263): (main) [6154,24650] TAP, TAP, TAP
[TRACE] D/AudioSink( 34): bufferCount (4) is too small and increased to 12
[INFO] [135,24785] Playing Sound: 5../sounds/mrt/asus.wav, snd 5 - ti.modules.titanium.media.SoundProxy@44f378a0
[TRACE] E/TiUIView( 263): (main) [16809,41594] TAP, TAP, TAP
[TRACE] D/AudioSink( 34): bufferCount (4) is too small and increased to 12
[INFO] [178,41772] Playing Sound: 5../sounds/mrt/asus.wav, snd 5 - ti.modules.titanium.media.SoundProxy@44f8ac78
[TRACE] E/TiUIView( 263): (main) [2802,44574] TAP, TAP, TAP
[TRACE] D/AudioSink( 34): bufferCount (4) is too small and increased to 12
[INFO] [136,44710] Playing Sound: 5../sounds/mrt/asus.wav, snd 5 - ti.modules.titanium.media.SoundProxy@44fad868

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

Here is what you do:

buttons[i] = Ti.UI.createButton({
    ..........
    //Add this
    my_id:i
});

This can be fetched again later

buttons[i].addEventListener('click',function(e)){ 
    var i = e.source.my_id;
    snd[i] = Ti.Media.createSound({ url: sounds[i] }).play();
    Ti.API.info("Playing Sound: " + i + sounds[i] + ", snd " + i + " - " + snd[i]);
});

or

buttons[i].addEventListener('click',function(e)){ 
    var i = e.source.my_id;
    playSound(i); //And create a function that handles this.
});

Answer 2

I dont think you can chain the functions the way you have... try this

snd[i] = Ti.Media.createSound({ url: sounds[i] });
snd[i].play();