Javascript - 仅在DOM中可见div时播放音频

Question

我的脚本有问题，那就是当我点击.bbp按钮时我想播放音频，但是这个按钮位于隐藏的div中，然后克隆。

只有当克隆的div在DOM中可见时，我才想在点击.bbp时播放音频，但它对我不起作用。

SEE DEMO LIVE（Codepen） - Snippet不能在Stackoverflow上运行

请注意，如果您评论#products，分配给.bbp的音频将播放，否则它将无法播放，因为音频脚本无法识别#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"--> 

脚本（播放音频）

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

正如我在评论中提到的，你有两个地方可以处理.bpp的click事件 - 这些事件相互干扰。此外，您正在混合应添加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');});

之后你应该听到收音。