var audio = new Audio('https://zvukipro.com/uploads/files/2017-08/1504162247_sobaka_-_lay_sobaki-2.mp3');
Мы тут пытаемся восстановить,что вообще происходит по статочным данным, если общий код+ html слишком большие нужно пробовать на более простых примерах.
$(document).ajaxComplete(function(event,request,settings){
$(document).on('click', '.play', function() {
if ($(this).hasClass('fa-play')) {
$('.play').toggleClass("fa-play fa-pause");
audio.play();
} else {
$('.play').toggleClass("fa-pause fa-play");
audio.pause();
}
});
Я убрал класс fa-play из кода: class="play fa fa-play" вовсе, оставил только class="play fa"
Иконка естественно пропала, при обычной загрузке страницы:
Иконки сперва нет вообще, потом после клика добавляется иконка "плей"
При повторном нажатии он меняется на "паузу" и срабатывает звук
После загрузки ajax
Иконки так же нет вообще, после клика появляется иконка "пауза" срабатывает звук, но в плей (остановку звука почему-то не переходит...)
$(document).on('click', '.play', function() {
if ($(this).hasClass('fa-play')) {
$('.play').removeClass('fa-play').addClass('fa-pause');
audio.play();
} else {
$('.play').removeClass('fa-pause').addClass('fa-play');
audio.pause();
}
});
$(".play").click(changeClass);
function changeClass() {
$(".play").toggleClass("fa-play fa-pause");
if ($(this).hasClass('fa-play')) {
audio.pause();
} else {
audio.play();
}
Я говнокодер самоучка, что конечно ужасно, но "для себя" прокатит