Javascript - Воспроизведение аудио, только когда div виден в DOM

Question

У меня проблема с моим сценарием, и я хочу воспроизвести аудио, когда нажимаю кнопку .bbp, но эта кнопка находится внутри скрытого элемента div, который затем клонируется.

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

СМОТРЕТЬ ДЕМО-ЖИВОЙ (Codepen) - фрагмент не работает в режиме Stackoverflow

Примечание : если вы прокомментируете #products, будет воспроизводиться звук, назначенный для .bbp yes, в противном случае он НЕ будет воспроизводиться, поскольку аудио Сценарий не может определить, является ли #products видимым в DOM или нет.

Итак, сначала я должен знать, что .bbp виден , и я не могу найти, как я могу это сделать.

Есть идеи ...?

Заранее спасибо!

// -----------------

HTML & CSS

#products {display:none}
#derecha {display:none}

---

<div class="comprar">Clone 1</div> <!--Clone the div from "products" to "derecha"-->

<div class="bbp">X</div> <!--Delete the cloned div placed into "derecha"--> 

SCRIP (Воспроизведение аудио)

let audioHolderComprar = {};
$('.comprar').click(()=>{
  let tempIdentifier = Date.now();
  audioHolderComprar[tempIdentifier] = new Audio('comprar.mp3');
  audioHolderComprar[tempIdentifier].play();

  setTimeout(() => {
    delete audioHolderComprar[tempIdentifier];
  }, audioHolderComprar[tempIdentifier].duration + 1200);
});

//------------------

let audioHolderBorrar = {};
$('.bbp').click(()=>{
  let tempIdentifier = Date.now();
  audioHolderBorrar[tempIdentifier] = new Audio('borrar.mp3');
  audioHolderBorrar[tempIdentifier].play();

  setTimeout(() => {
    delete audioHolderBorrar[tempIdentifier];
  }, audioHolderBorrar[tempIdentifier].duration + 1200);
});

Answer 1

Как я уже упоминал в своем комментарии, у вас есть два места, где вы обрабатываете событие click для .bpp - они мешают друг другу. Также вы смешиваете места, где вы должны добавить HTML и JavaScript-код. Хотя это работает, это немного грязно.

Замените все содержимое левой панели HTML следующим:

<div id="container">
<div id="productos">
            <!-- =============== -->
<div id="cont-p1" class="cont-p">
<div id="producto-1">
<div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>cont-p1 cloned!<br><br>Input Value = 1</div>

<input class="add-prod" type="num" value="1">

<div class="bbp">X</div></div>

</div> <!-- // productos -->

<div class="derecha" id="derecha"></div> <!-- // div derecha -->

<div id="comp-p1" data-clone="cont-p1" class="comp-clone comprar">Clone 1</div>

<div class="cont-num" id="clicks">0</div>
<div class="cont-num" id="clicksdos">0</div>

<div id="cont-resultado">
<input name="total" id="total">
</div>

  <div id="cont-note">How to play the audio on the button to close the cloned div <span>.bbp</span><br>( <span class="red">X</span> ),<br>if the audio script can not know that it has been cloned...?
<br><br>
Note the CSS (line 3) that the div container of the all div´s that must be cloned is in <span>display=none</span>, but if you comment this line it can reproduce the audio onclick in the X button</div>

</div> <!-- // container -->

и все перечисленные ниже элементы переходят на панель JS справа:

/*
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
*/

let audioHolderComprar = {};
$('.comprar').click(()=>{
  let tempIdentifier = Date.now();
  audioHolderComprar[tempIdentifier] = new Audio('https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3');
  audioHolderComprar[tempIdentifier].play();

  // removing after play process gets over so if won't consume memory
  setTimeout(() => {
    delete audioHolderComprar[tempIdentifier];
  }, audioHolderComprar[tempIdentifier].duration + 1200 /* you can remove threshold value if you wants to */);
});

//------------------

let audioHolderBorrar = {};

let clicks = 0;
let clicksdos = 0;

const safeInt = (key) => {
  let value = parseInt(getValue(key));
  return (isNaN(value) || value < 0) ? 0 : value;
}

// This loads our clicks from the LocalStorage
const loadClicks = () => {
  clicks = safeInt('clicks');
  clicksdos = safeInt('clicksdos');
}

const loadHTML = () => {
  return getValue('html', '');
}

const loadFromStorage = () => {
  let html = loadHTML();
  if (html !== '') {
    loadClicks();
  }
  displayClicks();
  document.querySelector(".derecha").innerHTML = html;
}

// Display the clicks on the screen
const displayClicks = () => {
  clicks = (clicks === NaN) ? 0 : clicks;
  clicksdos = (clicksdos === NaN) ? 0 : clicksdos;
  document.querySelector('#clicks').innerHTML = clicks;
  document.querySelector('#clicksdos').innerHTML = clicksdos;
  // Hide / Show Result 
  let display = (clicks > 0) ? 'block' : 'none';
  document.querySelector('#cont-resultado').style.display = display;
  document.querySelector('.derecha').style.display = display;
  //document.querySelector('#aviso-producto-agregado').style.display = "block";
}

const adjustClicks = (value) => {
  clicks += value;
  clicksdos += value;
  storeValue('clicks', clicks);
  storeValue('clicksdos', clicksdos);
  displayClicks();
}
const addClick = () => adjustClicks(1);
const removeClick = () => adjustClicks(-1);


// Manage localStorage
const storeValue = (key, value) => (localStorage) ? localStorage.setItem(key, value) : '';
const getValue = (key, defaultValue) => (localStorage) ? localStorage.getItem(key) : defaultValue;
const storeHTML = () => storeValue("html", document.getElementsByClassName("derecha")[0].innerHTML);

// Add a node to the Derecha
const addToDerecha = (nodeId) => {
  let node = document.querySelector(`#${nodeId}`);
  document.querySelector('.derecha').appendChild(node.cloneNode(true));
  storeHTML();
  displaySuma();
};

// Monitor ALL click events 
document.addEventListener('click', (event) => {
  let target = event.target;
  // Add
  if (target.matches('.comp-clone')) {
    addClick();
    addToDerecha(event.target.dataset.clone);
  }
  // Remove
  if (target.matches('.bbp')) {
  let tempIdentifier = Date.now();
  audioHolderBorrar[tempIdentifier] = new Audio('https://notificationsounds.com/soundfiles/99c5e07b4d5de9d18c350cdf64c5aa3d/file-sounds-1110-stairs.mp3');
  audioHolderBorrar[tempIdentifier].play();

  // removing after play process gets over so if won't consume memory
  setTimeout(() => {
    delete audioHolderBorrar[tempIdentifier];
  }, audioHolderBorrar[tempIdentifier].duration + 1200 /* you can remove threshold value if you wants to */);
    getParent('.derecha', target).removeChild(target.parentNode);
    removeClick();
    storeHTML();
    displaySuma();
  }
});

// This is just a helper function.
const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);

// New Script for sum inputs
//const displaySuma = () => document.getElementById("total").value = suma();
const displaySuma=()=>document.getElementById("total").value=suma().toLocaleString("es-ES");

const suma = function() {
  return Array.from(document.querySelectorAll(".derecha div .add-prod"))
    .reduce((a, v) => a + parseFloat(v.value), 0);
}

// Code to run when the document loads.
document.addEventListener('DOMContentLoaded', () => {
  if (localStorage) {
    loadFromStorage();
  }

  displaySuma();

});
</script>

<script>
  // Displays the new product alert added when the scroll is detected in the div #derecha
  var displaced = document.getElementById('derecha')
      if (displaced.scrollHeight > displaced.offsetHeight) {
      document.getElementById("notice-product-added").style.display = "block";
  };

  // LocalStorage for the div #notice-product-added
  const showMsgCart=localStorage.getItem('showMsgCarrito');if(showMsgCart==='false'){$('#notice-product-added').hide();}$('#notice-product-added').on('click',function(){$('#notice-product-added').fadeOut('slow');localStorage.setItem('showMsgCarrito','false');});

После этого вы должны услышать закрывающий звук.