jQuery проблема со ссылкой на id - Использование Howler. js - PullRequest
Новая
       66

jQuery проблема со ссылкой на id - Использование Howler. js

1 голос
/ 22 февраля 2020

У меня есть лабиринт, который я пытаюсь отсортировать:

У меня есть эта сетка с 12 тегами привязки 

for (let i = 1; i <= 12; i++) {
  $("#minuetti").append(
    `<div class="col-6 col-md-3"> <a id="minuetto${i}" class="btn btn-primary btn-lg mb-1 minuetto">Minuetto ${i}</a></div>`
  );
}

Каждый из них будет воспроизводить другой файл mp3 с кодом ниже используя Howler. js. 

$(".minuetto").on("click", function() {
  let id = this.id;
  let minuettoPath = `assets/music/${id}.mp3`;
  let cell = new Howl({
    src: [minuettoPath],
    onplay: function() {
      $(`#${id}`).text("Stop");
      $(".minuetto").addClass("disabled");
      $(`#${id}`).removeClass("disabled");
      $(`#${id}`).removeClass("minuetto");
      $(`#${id}`).on("click", function() {
        cell.stop();
      });
    },
    onend: function() {
      $(".minuetto").removeClass("disabled");
      $(`#${id}`).text(`Minuetto ${id.slice(8)}`);
      $(`#${id}`).addClass("minuetto");
      this.unload();
    }
  });
  cell.play();
});

Моя проблема:

Я пытаюсь изменить текст нажатой кнопки и оставить ее включенной. Я отключаю все оставшиеся (11) кнопки до конца mp3-файла. Но когда я нажимаю на включенную кнопку (ту, которая играет) вместо остановки моего mp3, он перезагружается. Что я делаю не так с моим jQuery здесь? Я ссылаюсь на свой идентификатор и вызываю функцию для выполнения cell.stop(), но по какой-то причине jQuery запускает воспроизведение снова, хотя я удалил класс minuetto из кнопки воспроизведения. Я действительно озадачен. Пожалуйста, помогите?

1 Ответ

1 голос
/ 22 февраля 2020
  • Использовать только const sound = new Howl({src: mp3.path});
  • Создать элемент с помощью конструктора * Object элемента jQuery $({})
  • Назначить необходимые события, такие как click(), play() и stop() что вы можете trigger при необходимости и выполнять желаемые действия
  • Использовать sound.playing() Гоулера, чтобы определить, какой обратный вызов триггера необходим 

// Use an array of objects instead, otherwise if one day
// you decide to remove a numeric song you'll have to replace it with another.
// This also allows you to change the order of songs:
const mp3list = [
  {name:'Enter Sandman', path:'https://upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg'},
  {name:'Back in Black', path:'http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg',},
  {name:'U2 - One', path:'https://upload.wikimedia.org/wikipedia/en/5/5e/U2_One.ogg',},
];

let $allMP3 = [];

const $newMP3 = mp3 => {

  // HOWL
  const sound = new Howl({src: mp3.path});

  // $ ELEMENT
  return $('<div>', {
    class: 'minuetto',
    text: mp3.name,
    on: {
      click() {
        $allMP3.forEach($el => $el.not(this).trigger('stop'));
        $(this).trigger(sound.playing() ? 'stop' : 'play');
      },
      play() {
        $(this).text("Stop");
        sound.play();
      },
      stop() {
        $(this).text(mp3.name);
        sound.stop();
      }
    }
  });
};

$allMP3 = mp3list.map($newMP3); // Populate array of $ elements
$("#minuetti").append($allMP3); // Append once!
<div id="minuetti"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
...