Howler.js中如何通过变量调用另一个变量执行播放操作？

我在页面中定义了全局变量：

var sound_thunderstorm = new Howl({  src: ['thunderstorm.mp3'], preload: true });

通过 sound_thunderstorm.play(); 可正常播放该音频，全局变量可在任意位置调用。

点击鼠标后，我想播放data-soundclick属性对应的音频，编写代码：

var soundfile = 'sound_'+jQuery(this).data('soundclick');

此时soundfile的值为'sound_thunderstorm'，但调用 soundfile.play() 无效，无法识别对应音频实例。请问如何通过一个变量调用另一个变量？

当前soundfile只是字符串，并非实际的Howl音频实例，所以直接调用.play()会失效，以下两种方法可以解决：

方法一：通过window全局对象访问 #

全局变量默认挂载在window对象上，可通过字符串作为键获取对应实例：

var soundKey = 'sound_' + jQuery(this).data('soundclick');
window[soundKey].play();

当soundKey为'sound_thunderstorm'时，window['sound_thunderstorm']会直接获取到你定义的Howl实例，即可正常调用播放方法。

方法二：用统一对象管理音频实例（更推荐） #

将所有音频实例整合到一个对象中，替代零散的全局变量，管理和调用更规范：

// 重构全局音频实例的定义方式
var soundLibrary = {
  thunderstorm: new Howl({ src: ['thunderstorm.mp3'], preload: true })
  // 可在此添加其他音频实例，比如 rain: new Howl({ src: ['rain.mp3'] })
};

// 点击事件中的调用代码
var soundName = jQuery(this).data('soundclick');
soundLibrary[soundName].play();

这种方式无需拼接sound_前缀，直接使用data-soundclick属性的值作为对象的键，代码更简洁，还能避免全局变量污染。

内容的提问来源于stack exchange，提问作者Vexxed