javascript - Howler.js - 从数组/for 循环引用和触发文件

Question

我正在尝试使用数组和 for 循环来索引和命名一些 Howls 和 Howl 触发按钮。

我已经引用了这个问题来了解我想要实现的目标:Howler - Random sound
与我的不同之处在于它没有随机方面，而且我添加了一些方法调用。

我将用于触发嚎叫的按钮添加到循环中，这就是它似乎失败的地方 - 即单击按钮时。

单击任一按钮时控制台会报告以下内容:
未捕获类型错误:无法读取未定义的属性“play”
具体引用这个:sounds[i].play();或者sounds[i].pause();

这是 JS:

var sounds = ['sound1', 'sound2'];
var howls = {};
for (var i=0; i<sounds.length; i++) {
    howls[sounds[i]] = new Howl({
        urls: ['http://powellian.com/assets/audio/' + sounds[i] + '.mp3', 'http://powellian.com/assets/audio/' + sounds[i] + '.ogg'],
        volume: 1,
        onplay: function() {
            console.log('Playing: ' + sounds[i]);
            $(sounds[i]).removeClass('static').addClass('playing');
            $(sounds[i] + ' span.ascii-play').addClass('hide');
            $(sounds[i] + ' span.ascii-pause').removeClass('hide');
        },
        onpause: function() {
            console.log('Paused: ' + sounds[i]);
            $(sounds[i]).removeClass('playing').addClass('paused');
            $(sounds[i] + ' span.ascii-play').removeClass('hide');
            $(sounds[i] + ' span.ascii-pause').addClass('hide');
        },
        onend: function() {
            console.log('Finished: ' + sounds[i]);
            $(sounds[i]).removeClass().addClass('static');
            $(sounds[i] + ' span.ascii-play').removeClass('hide');
            $(sounds[i] + ' span.ascii-pause').addClass('hide');
        }
    });

    // PLAY btn
    $('#' + sounds[i] + ' span.ascii-play').on('click', function (e) {
        sounds[i].play();
    });
    // PAUSE btn
   $('#' + sounds[i] + ' span.ascii-pause').on('click', function (e) {
        sounds[i].pause();
    });
}

我有一个非数组/for循环版本，可以很好地处理2个Howls，并且添加/删除类的东西也可以正常工作，所以请忽略它。

我最终将从数组中生成 16 个嚎叫。

这是一个包含标记结构的 fiddle :Howler Fiddle

如有任何帮助，我们将不胜感激，提前致谢。

Answer 1

我在这里看到两个问题:

1. 您在 click 处理程序中引用变量 i，但没有维护作用域。因此，它总是将 i 视为最后一个值。您可以使用 bind 作为解决此问题的一种方法:

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


您正尝试对 sounds 调用 play，但该声音未保存对 Howl 对象的引用。您应该改为在 howls[sounds[i2]] 上调用 play。

编辑:在这种情况下，使用 forEach 更容易，因此我更新了您的 fiddle 来执行此操作并修复此处的范围问题:http://jsfiddle.net/zmjz7sf3/1/ .