在 Howler.js 中将 var 与 .play() 方法一起使用时出现未捕获的类型错误

Question

我正在使用 howler.js 将鼠标悬停在页面上的元素上时启动音频。为了避免为每个元素重复悬停功能，我想我可以只获取每个元素的 id，将结果存储在一个变量中并使用该变量播放相应的音轨。变量 "track" returns 在控制台中的正确结果但是当我将它附加到 .play() 方法时我得到...

Uncaught TypeError: track.play is not a function
(anonymous function) @ index.html:413
b.event.dispatch @ jquery.min.js:3
v.handle @jquery.min.js:3

这是代码（使用 jquery 1.9.1 和 howl.js 1.1.26）

var One   = new Howl({ urls: [ 'audio/One.mp3' ] });
var Two   = new Howl({ urls: [ 'audio/02.mp3' ] });
var Three = new Howl({ urls: [ 'audio/03.mp3' ] });

$('.track').hover(function() {
  var track = $(this).attr("id");
  track.play();
  console.log(track);
}, function() {
  var track = $(this).attr("id");
  track.pause();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.26/howler.min.js"></script>

<div class="track" id="One">Track 1</div>
<div class="track" id="Two">Track 2</div>
<div class="track" id="Three">Track 3</div>

Answer 1

您不能使用字符串按名称引用变量。处理此问题的最佳方法是创建一个对象来保存您的足迹。

var tracks = {
    One: new Howl({ urls: [ 'audio/One.mp3' ] }),
    Two: new Howl({ urls: [ 'audio/02.mp3' ] }),
    Three: new Howl({ urls: [ 'audio/03.mp3' ] })
};

$('.track').hover(function() {
    var track = $(this).attr("id");
    tracks[track].play();
    console.log(track);
}, function() {
    var track = $(this).attr("id");
    tracks[track].pause();
});

然而，这仍然不理想。您可以通过使用数据属性来保存曲目信息而不是 Id 来进一步改进它。

<div class="track" data-track="1">Track 1</div>

然后像这样访问它：

var track = $(this).data("track")

然后通过这种方式，您可以将曲目存储在一个数组中，这是此处使用的最自然的数据类型：

var tracks = [
    new Howl({ urls: [ 'audio/One.mp3' ] }),    
    new Howl({ urls: [ 'audio/Two.mp3' ] })
];

在 Howler.js 中将 var 与 .play() 方法一起使用时出现未捕获的类型错误

Getting Uncaught TypeError when using var with .play() method in Howler.js

javascript

jquery

howler.js