0

Есть большое количество audio и checkbox-ы возле них. Если checkbox выбран, то audio должно воспроизводится, если не выбран, то audio на паузе. Допускается одновременное воспроизведение нескольких audio.

Нашел вот такой скрипт, но он был заточен под выбор одного audio по id. Я решил поправить - прописал getElementsByClassName, но не тут то было :)

Можете помочь поправить скрипт? Можно на js, можно на jquery, верстку тоже можно менять.

var shum = document.getElementsByClassName("shum");
var isPlaying = false;
function toggleShum() {
 isPlaying ? shum.pause() : shum.play();
};
shum.onplaying = function() {
 isPlaying = true;
};
shum.onpause = function() {
 isPlaying = false;
};
<input type="checkbox" class="btn-check" id="ogon" onClick="toggleShum()">
<audio controls loop class="shum" src="ogon.mp3"></audio>

<input type="checkbox" class="btn-check" id="kot" onClick="toggleShum()">
<audio controls loop class="shum" src="kot.mp3"></audio>

2
  • Подсмотрите, как работать с getElementsByClassName - он возвращает HTML коллекцию. Вам в цикле надо будет проверять item.checked
    – SwaD
    9 дек 2022 в 9:42
  • Спасибо, но я не смог с этим разобраться
    – Юра
    9 дек 2022 в 10:04

1 ответ 1

1

function toggleShum(box) {
  let player = box.nextElementSibling;
  if (box.checked) player.play();
  else player.pause();
}
<input type="checkbox" class="btn-check" id="ogon" onClick="toggleShum(ogon)">
<audio controls loop class="shum" src="ogon.mp3"></audio>

<input type="checkbox" class="btn-check" id="kot" onClick="toggleShum(kot)">
<audio controls loop class="shum" src="kot.mp3"></audio>

1
  • Спасибо. То что нужно 👍
    – Юра
    9 дек 2022 в 17:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.