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

Posted 2023-02-25

【中文标题】Howler.js - 从数组/for循环引用和触发文件

【英文标题】：Howler.js - referencing and triggering files from an array/for-loop

【发布时间】：2016-07-05 20:57:22

【问题描述】：

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

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

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

单击任一按钮时，控制台会报告以下内容：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

任何帮助将不胜感激，在此先感谢。

【参考方案1】：

我在这里看到了两个问题：

您在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/。

【讨论】：

感谢您的回复。

感谢您的回复。我已经根据您的 cmets 进行了更新，并且可以看到您在说什么不正确的对象引用和函数范围。但是，此示例中的范围界定我并不完全理解 tbh。好消息是没有任何控制台错误，但它仍然没有播放。我已经更新了 Fiddle 以反映您的 cmets，还添加了指向外部音频文件的链接，之前丢失了。那里有什么明显的错误吗？ FIDDLE

擦掉最后的评论，因为我现在已经用那个建议播放了音频，谢谢！但是，播放/暂停隐藏/显示类不适用于我猜是相同的范围界定问题。我在应用相同的 .bind() 方法时大吃一惊，但它在 console.log 中返回“未定义”。会在我可以的时候继续打它，不过会有点断断续续。这是UPDATED FIDDLE

太棒了，谢谢你，.forEach() 显然是解决这个问题的方法。我已经开始运行其他的东西了——添加/删除类等等。非常感谢你的帮助。

现在还有一个奇怪的分支问题，.pause() 已停止正常工作。会修补，但可能需要另一个小提琴，因为我无法正确复制它。但是发生的情况是，当单击“暂停”按钮时，“听得见”的音频会停止，但它仍在静默运行。 console.log for onend 报告它实际结束的时间。将继续努力，如果不满意，请回到这里。到目前为止，谢谢！