Почему мое аудио не воспроизводится, когда я наведу курсор мыши на Div?

Question

Мой повторяющийся радиальный градиент не воспроизводит звук. Может кто-нибудь помочь? Я думаю, что у меня есть проблема с идентификаторами. Первая ссылка - код, вторая - сайт. https://github.com/Robocop79/Websiteland/blob/master/index.html https://robocop79.github.io/Websiteland/

Answer 1

Основные проблемы в вашем коде Javascript:

• В HTML нет элемента с идентификатором nav-two, вы имели в виду grad1?
• Вы клонируете аудио <source> элементы, но .play() может выполняться только на <audio>

$("#grad1 a").each(function(i) {
  if (i != 0) {
    $("#bay").parent()
    .clone()
    .attr("id", "bay" + i)
    .appendTo($(this).parent());
  }
  $(this).data("bay", i);
})
.mouseenter(function() {
  $("#bay" + $(this).data("bay"))[0].play();
});

Вы также можете упростить способ запуска аудио, переместив мышиный вызов внутри функции .each (и, следовательно, устраняя необходимость в атрибутах data).

$("#grad1 a").each(function(i) {
  if (i != 0) {
    var clonedaudio = $("#bay").parent()
      .clone()
      .appendTo($(this).parent());

    $(this).mouseenter(function() {
      clonedaudio[0].play();
    });
  }
})