Howler.js - 从数组/for循环中引用和触发文件
Howler.js - referencing and triggering files from an array/for-loop
我正在尝试使用数组和for循环来索引和命名一些嚎叫和嚎叫触发按钮。
我已经参考了这个问题来表达我想要实现的目标: 吼叫 - 随机声音
与我的不同之处在于它没有随机方面,而且我添加了一些方法调用。
我正在将用于触发 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 循环版本,可以正常工作,并且可以使用 2 个 Howls,并且添加/删除类的东西工作正常,所以请忽略它。
我最终将从数组中生成 16 个嚎叫。
这是一个包含标记结构的小提琴:吼叫小提琴
任何帮助将不胜感激,提前感谢。
我在这里看到两个问题:
- 您引用
click
处理程序中的变量i
而不维护作用域。因此,它将始终将i
视为最后一个值。您可以使用bind
作为解决此问题的一种方法:
$('#' + sounds[i] + ' span.ascii-play').on('click', function (i2, e) {
sounds[i2].play();
}.bind(null, i));
- 您正在尝试在
sounds
上调用play
,这不保存对Howl
对象的引用。您应该改为在howls[sounds[i2]]
上呼叫play
。
编辑:在这种情况下,使用forEach
更容易,所以我更新了你的小提琴来做到这一点,并在这里修复了范围问题:http://jsfiddle.net/zmjz7sf3/1/。
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何引用HTML中节点模块中的js文件
- 如何在ThreeJs中加载引用的COLLADA文件
- 可以在Javascript文件中引用定义的CSS类吗
- 引用nodejs服务器中html中的java脚本文件
- 包含的文件中引发引用错误..除非调用文件包含慢速代码
- 如何引用父文件夹中的javascript
- 当我移动引用three.js的html文件时,three.js停止工作
- 如何在javascript文件中获取引用
- 如何在此 JSON 文件中引用此数据
- 我是否必须在每个文件中引用 TypeScript 定义
- 对 jquery 库 + 外部文件的 HTML 引用
- 从调试中删除引用文件
- 使用 JavaScript 代码而不是引用文件
- 更改页面源引用文件路径
- 为intellisense创建JSON对象的javascript引用文件
- 在浏览器中使用 ES6 模块时,我是否应该在“脚本”标签中引用文件
- 解析.当深度链接时,路由器无法找到引用文件
- 在AngularJS应用中,可以在底层和节点文件夹中引用文件吗?
- 使用 href 从根文件夹引用文件夹