我正在尝试使用数组和for循环来索引和命名一些Howls和Howl触发按钮。
我已引用此问题以寻求实现以下目标:Howler - Random sound
与我的区别在于它没有随机方面,而且我添加了一些方法调用。
我将用于触发adding叫的按钮添加到循环中,这似乎是失败的地方-即单击按钮时。
单击任一按钮时,控制台将报告以下内容: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循环版本,可以与2个Howls一起正常工作,并且add / remove类的工作正常,所以请忽略它。
我最终将从阵列中生成16个How叫声。
这是一个包含标记结构的小提琴:Howler Fiddle
任何帮助将不胜感激,在此先感谢。
最佳答案
我在这里看到两个问题:
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
更加容易,所以我已经更新了您的小提琴来做到这一点,并在此处解决了范围界定问题:http://jsfiddle.net/zmjz7sf3/1/。