Получение Uncaught TypeError при использовании var с методом.play() в Howler.js

Question

Я использую howler.js для запуска аудио при наведении на элементы на странице. Чтобы избежать дублирования функции наведения для каждого элемента, который я решил, я мог бы просто захватить идентификатор каждого элемента, сохранить результат в переменной и использовать эту переменную для воспроизведения соответствующей звуковой дорожки. Переменная "track" возвращает правильный результат в консоли, но когда я присоединяю его к методу.play(), я получаю...

Uncaught TypeError: track.play не является функцией
(анонимная функция) @ 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();
});

Тем не менее, это все еще не идеально. Вы можете улучшить его, используя атрибут data для хранения информации о дорожке, а не 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' ] })
];