Question

我试图使用数组和for循环索引并命名一些Howls和Howl触发按钮。

我已经提到了我想要实现的目标：Howler - Random sound
与我的区别在于它没有随机方面，而且我添加了一些方法调用。

我添加了用于触发Howls进入循环的按钮以及它似乎失败的位置 - 即单击按钮时。

单击任一按钮时，控制台会报告以下内容：
Uncaught TypeError: Cannot read property 'play' of undefined
具体是指：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-loop版本可以正常使用2个Howls，并且添加/删除类的工作正常，所以请忽略它。

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

这是一个包含标记结构的小提琴：Howler Fiddle

任何帮助将不胜感激，提前谢谢。

Answer 1

我在这里看到两个问题：

您在i处理程序中引用变量click而不保持范围。因此，它始终会将i视为最后一个值。您可以使用bind作为解决此问题的一种方法：

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

您正试图在play上致电sounds，而Howl并未持有play对象的引用。您应该在howls[sounds[i2]]上致电forEach而不是。

编辑：在这种情况下，使用(:A)<--(:B)<-[:R {timestamp}]-(:C {number})会更容易，因此我已经更新了您的小提琴，并在此处修复了范围问题：http://jsfiddle.net/zmjz7sf3/1/。

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

1 个答案: