Howler.js - Referencing And Triggering Files From An Array/for-loop

I'm trying to use an array and for-loop to index and name some Howls and Howl trigger buttons. I've referenced this question for what I'm trying to achieve: Howler - Random sound

Solution 1:

There are two issues that I see here:

1. You are referencing the variable i inside the click handler without maintaining scope. Because of this, it will always see i as the last value. You could use bind as one way of fixing this:

$('#' + sounds[i] + ' span.ascii-play').on('click', function (i2, e) { sounds[i2].play(); }.bind(null, i));

2. You are trying to call play on sounds, which isn't holding the reference to the Howl object. You should be calling play on howls[sounds[i2]] instead.

EDIT: In this case it is just easier to use a forEach, so I've updated your fiddle to do that and fix the scoping issues here: http://jsfiddle.net/zmjz7sf3/1/.