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

问题描述

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

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
The difference with mine is that it's without the random aspect plus I've added some method calls.

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

I'm adding the buttons used to trigger the Howls into the loop and that's where it seems to be failing - namely when the buttons are clicked.

单击任一按钮时，控制台报告以下内容:
Uncaught TypeError: Cannot read property 'play' of undefined
具体指的是:sounds[i].play();或sounds[i].pause();

Console reports the following when either button is clicked:
Uncaught TypeError: Cannot read property 'play' of undefined
Specifically referring to this: sounds[i].play(); or 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个fine叫，并且添加/删除类的东西也可以正常工作，所以请忽略它.

I had a non-array/for-loop version working fine with 2 Howls, and the add/remove class stuff works fine so please ignore that.

我最终将从阵列中生成16个How叫声.

I will eventually be generating 16 Howls from the array.

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

Here's a fiddle which includes the markup structure: Howler Fiddle

我们将不胜感激，在此先感谢您.

Any help would be appreciated, thanks in advance.

推荐答案

我在这里看到两个问题:

There are two issues that I see here:

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

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

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

1. 您正在尝试在sounds上调用play，它没有保存对Howl对象的引用.您应该改为在howls[sounds[i2]]上调用play.

1. 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.

在这种情况下，使用forEach更加容易，因此我已经更新了您的小提琴来做到这一点并在此处解决了范围界定问题: http://jsfiddle.net/zmjz7sf3/1/.

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/.

这篇关于Howler.js-从数组/循环中引用和触发文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！