Переключить звук и класс по клику, но также удалить класс через 6 секунд
Я пытаюсь использовать jQuery, чтобы добавить класс «активный» к ссылке при нажатии, а затем автоматически удалить через 6 секунд. Если ссылка имеет класс «активен» при нажатии, тогда продолжайте и удалите класс. Я также пытаюсь использовать эту ссылку для воспроизведения/остановки воспроизведения mp3.
HTML:
<audio id = "cat-growl-sound" controls>
<source src = "sound.mp3" type = "audio/mpeg">
</audio>
<a id = "cat-growl-link" href = "javascript:void(0)">Fire Me!</a>
CSS:
audio { display: none; }
#cat-growl-link.active { color: red; }
JЗАПРОС:
$('#cat-growl-link').click(function() {
$("#cat-growl-sound")[0].play();
$(this).addClass('active');
$(this).removeClass('active').delay(6000);
});
$('#cat-growl-link.active').click(function() {
$("#cat-growl-sound").stop();
$(this).removeClass('active');
});
Я пробовал разные методы, чтобы попытаться заставить это работать, но разные методы работают только частично, а не все. Этот сценарий, который я решил опубликовать здесь, я думаю, лучше всего объясняет, что я пытаюсь сделать, даже если он не работает. Как мне заставить это работать правильно?
Вот jsFiddle с рабочим звуком: https://jsfiddle.net/tcmpguok/
... и только в методах, связанных после него, а не перед ним.
Ответы 1
Пара проблем. Во-первых, delay() работает только с методами jQuery, использующими очередь анимации — другими словами, асинхронными операциями. Даже в этом случае будут задержаны только методы, связанные после delay(), а не те, которые были до него.
Во-вторых, ваш второй обработчик событий не является динамическим; он будет привязан к любому элементу, который соответствует #cat-growl-link.active, во время загрузки страницы, а не в будущем, поскольку класс элемента добавляется/удаляется.
В общем, вы, вероятно, хотите что-то вроде этого:
let audio = $("#cat-growl-sound")[0],
timeout;
$('#cat-growl-link').on('click', function() {
if (!$(this).is('.active')) {
$(this).addClass('active');
audio.play();
timeout = setTimeout(() => $(this).removeClass('active'), 6000);
} else {
$(this).removeClass('active');
clearTimeout(timeout);
audio.pause();
audio.currentTime = 0;
}
});
Спасибо, что нашли время объяснить. Одна проблема с фрагментом, однако, я получаю сообщение об ошибке консоли: «audio.stop не является функцией».
Я попытался заменить «audio.stop» принятым ответом из этого вопроса (stackoverflow.com/questions/14834520/html5-audio-stop-function), но это тоже не сработало.
замените audio.stop на audio.pause(); audio.currentTime = 0;, и я приму это как правильный ответ.
.delay()работает только с очередью анимации в jQuery. Вместо этого используйтеsetTimeout