Как подключить две кнопки для управления звуком?

Question

[Владимир]

Подключаю на сайте возможность включить фоновую музыку:

var el = document.querySelector('.sound__wrap');
var playing = false; 

var player = new Audio('https://cs1-41v4.vkuseraudio.net/p22/89c4bbf0f8c2cf.mp3?extra=LPjGgkVxx2u-3L5pQXEcRnizCVKmlE6Fg5kJXXLUjwokU20UCbUbg04TgUxrohK76r4YrOlWPfKCB_5hamC_Mnbtxyc75pnnsx6N3DxSl8sCGkCv54RY8wCzW9DyWkaEOlHyrVMNRR7k7hnf1R4');
player.preload = "auto";
player.loop = "true";
player.addEventListener('ended', function(){ 
playing = false;
});
el.addEventListener('click', playPause);

function playPause() {
  if( playing) {
    player.pause();
  } else {
    player.play();
  }
  playing = !playing;
}

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

Answer 1

[G F]

Тебе квери селектор возвращает один элемент
Используй
querySelectorAll(...).forEach(вешаешь обработчик)

Comments

[Владимир]

Спасибо за подсказку, но я от слова совсем не шарю в js, написать:

var el = document.querySelectorAll('.sound__wrap').forEach();
.....

или чего-то там еще? =/

[G F]

const elements = document.querySelectorAll('.sound__wrap').forEach(el => el.addEventListener('click', playPause)

Владимир

[Владимир]

G F, я вот прям пятой точкой ощущаю как в меня сейчас полетят тапки и что потяжелее, но оно не работает или я не так подключаю( Спасибо большое за ответы!

const elements = document.querySelectorAll('.sound__wrap').forEach(el => el.addEventListener('click', playPause)
var playing = false; 

var player = new Audio('https://cs1-41v4.vkuseraudio.net/p22/89c4bbf0f8c2cf.mp3?extra=LPjGgkVxx2u-3L5pQXEcRnizCVKmlE6Fg5kJXXLUjwokU20UCbUbg04TgUxrohK76r4YrOlWPfKCB_5hamC_Mnbtxyc75pnnsx6N3DxSl8sCGkCv54RY8wCzW9DyWkaEOlHyrVMNRR7k7hnf1R4');
player.preload = "auto";
player.loop = "true";
player.addEventListener('ended', function(){ 
playing = false;
});
el.addEventListener('click', playPause);

function playPause() {
  if( playing) {
    player.pause();
  } else {
    player.play();
  }
  playing = !playing;
}

[G F]

У тебя же el undefined должен эррор выдавать. Я про тот который перед функцией Владимир,

[Владимир]

G F, я уже писал что, увы, ничего в этом не понимаю, куда что вставить в общую картину

[Юра Комаров]

А зачем лезть в код если ничего не понимаете. Начните с начала, выучите основы js , а уж когда все изучите и что то не будет получаться то уже приходите и задавайте вопросы, а так вам все равно ничего не будет понятно . Только зря тратите время.

[Владимир]

Юра Комаров, а мне не нужно понять, мне нужно чтоб работало. Я спросил помощи, у кого есть желание или возможность - поможет. Нет так нет. А ходить по темам писать пустые комментарии не сильно энергозатратно?

[Юра Комаров]

Отдайте на фриланс, вам там за 100 рублей такой пустяк починят и ничего не сломают, а вот вы сейчас что то где то сотрете и если у вас нет гита или резервной копии то пиши пропало уже счет пойдет на тысячи .

[Владимир]

Юра Комаров, сделаете за 100р?