Как пофиксить двойной клик в данном недоскрипте?

Писал данную фиговину сам, масленок не врубается, на все что хватило ума на то и написал.
Суть в чем: при нажатии на кнопку должна воспроизводится музычка, эдакий недоплеер
<div id="toggle_music"  style="border-radius: 50px;background: #000; padding:10px;text-align: center; color:#fff; width:5%;cursor: pointer;">Кнопачка</div>

<audio id="music" class="">
<source src="assets/music_array/xxx.mp3" type="audio/mp3">
</audio>


собственно клас прописывается, музыка вопроизводится, при повторном нажатии музыка выключается, но чтобы повторно вопроизвести музыку нужно кликнуть по кнопке 2 раза, 2 раза прописывается класс off в тег audio, и только потом класс on

var music = document.getElementById('music'); 
			music.volume = 0.1;
			$('#toggle_music').click(function(event){ //пока нет никакого класса в теге audio, при клике на кнопочку добавляется класс on в тег audio, музыку включаем
				$('#music').addClass('on');
				music.play();
				
				if ($('#music').hasClass('on')) { //если нашли класс on то удаляем его и добавляем класс off, музыку гасим
					$('#toggle_music').click(function(event){
						$('#music').removeClass('on');
						$('#music').addClass('off');
						music.pause();
					});
				}
				if ($('#music').hasClass('off')){
					$('#toggle_music').click(function(event) {//если нашли класс off то удаляем его и добавляем класс on, музыку включаем
						$('#music').removeClass('off');
						$('#music').addClass('on');
						music.play();
					});
				}
			});
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
Код пока не проверял
const music = document.getElementById('music');
music.volume = 0.1

music.addEventListener('click', () => {
   music.classList.toggle('active')

    if (music.className.indexOf('active') === -1)
         music.pause()
    else
         music.play()
})


Ошибка у вас в том, что когда вы кликаете вы не проверяете класс. Проверка класса вне обработчика события. Вы сначала проверяете, затем инициализируете обработчик.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы