Пишу плеер. Не меняется плей на пауза и не воспроизводится трек. С кодом что-то?

Question

[Snixa]

При нажатии на плей трек не запускается. но если удаляю все что снизу, начиная с playBtn.addEventListener('click', .... тогда воспроизводится. НО еще... не меняется значек плей на пауза.

var audio, context, analyser, src, imgSrc, player;

audio = document.getElementById('audio');

window.onclick = function(){
audio.play();
}

function preparation(){
	context = new audioContext();
	analyser = context.createAnalyser();
	src = context.createMediaElementSource(audio);
	src.connect(analyser);
	analyser.connect(context.destination);
}
function playSong(){
	player.classList.add('play')
	imgSrc.src = 'img/pause.png'
	audio.play()
}

function pauseSong(){
	player.classList.remove('play')
	imgSrc.src = 'img/play.png'
	audio.pause()
}
playBtn.addEventListener('click', () {
	const isPlaying = player.classList.contains('play')
	if (isPlaying){
		pauseSong()
	} else {
		playSong()
	}
}
)

Comments

[Максим]

https://codepen.io/topicstarter/pen/KKdraGm вот я делал давненько...можете стилизовать по своему и использовать

Answer 1

[Stalker_RED]

Вы либо приложили не весь код, либо слепили его из скопированных откуда-то из интернета кусков не прихлодя в сознание.
Несколько переменных обявлены, но их значения не установлены. Ну и у вас при клеке по кнопке должна быть пауза, но чуть выше объявлено, что при клике в любом месте окна - play.
Поэтому когда пауза сработает, она тот-же будет снята при срабатывании window.onclick.

Есть и другие мелкие проблемы, но в целом, подправив буквально пару строк, этот код вполне можно запустить.
https://jsfiddle.net/6eqwrodk/

Comments

[Snixa]

спасибо, а я думала как эту стрелочку сделать.....)))) Тепер запускается. Но не меняется значек плей)

[Stalker_RED]

Snixa, какую стрелочку?
Значок не меняется, потому что кртинок нет?

[Snixa]

Stalker_RED, подключила. но он их не видит(

[Snixa]

и не останавливается при повторном нажатии

[Stalker_RED]

Snixa, я же не вижу ваш код и не знаю подключили вы картинки или нет, правильные там пути или нет, и так далее.

не останавливается при повторном нажатии

Если вы о повторном нажатии на кнопку, то я уже писал почему оно не сработает. Точнее сработает, но тут-же будет отменено.

[Snixa]

Stalker_RED, а как же написать что б оно не отменялось?

[Stalker_RED]

Snixa, удалить window.onclick, например?

сложно что-то посоветовать не представляя что вы вообще пытаетесь сделать.
Минимальный плеер с интерфейсом делается вот так, в отдну строку:
https://jsfiddle.net/4sx8a3d5/

[Snixa]

Stalker_RED, Знаю такой) попробую еще поискать. Спасибо большое за помощь и приделанное время.

[Stalker_RED]

Snixa, непонятно чего вы хотите добиться. Код плеера в целом рабочий, не хватает только мелочей. Например переменные imgSrc и player обяъвлены, но их значение нигде не задается, хотя есть попытки их использовать. Возможно при копировании "потерялись" несколько строк.

если удаляю ... начиная с playBtn.addEventListener('click', .... тогда воспроизводится. НО ... не меняется значек плей на пауза.

Это выдает вас с головой - вы похоже вообще не понимаете смысл всего этого кода. Когда вы удаляете обработчик playBtn.addEventListener(click ... все функции которые расположены выше не делают вообще ничего, потому что их вызов только внутри этого обработчика и происходит.
Из рабочего у вас остается только три строчки

window.onclick = function(){
  audio.play();
}

котрые, похоже, вы взяли в каком-то другом месте, т.к. они мешают работе всего остального кода (отключают паузу).