воспроизведение звукового файла на дисплее сНу

Question

У меня есть следующий код JavaScript:

<script type="text/javascript"> 
/** 
* @param {string} filename without extension //chat sound 
*/ 
function playSound(filename){ 
    document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></audio>'; 
} 

</script> 

Код играет звуковой файл по нажатию кнопки, которая работает отлично.

<button onclick="playSound('inc/sound');">Play</button> 
<div id="sound"></div> 

У меня есть еще один DIV следующим образом:

<div id="acceptCallBox"> 
    <!-- Should be initially hidden --> 
    <div id="acceptCallLabel"></div> 
    <input type="button" id="callAcceptButton" value="Accept" /> 
    <input type="button" id="callRejectButton" value="Reject" /> 
</div> 

Она скрыта по умолчанию (дисплей: нет;). Мне нужно воспроизвести звук, когда отображается div. Как это возможно. Запрос справки ...

Answer 1

Вы можете проверить, если отображается <div>, а затем сказать аудиофайл, чтобы начать играть, как показано ниже:

var acceptCallLabel = document.getElementById("acceptCallLabel"); 
var audio = document.getElementsByTagName("audio")[0]; 

if (acceptCallLabel.style.display != "none") { 
    audio.play(); /* Make the audio start playing */ 
} 

Answer 2

Вы открыты для использования JQuery в качестве альтернативы вашего подхода? Вот пример:

<a class="hiddensounddivclick" data-box="#hiddensounddiv" href="#">Click this to show div and play sound</a>  

<div class="hiddensound" data-sound="alert" id="hiddensounddiv"> 
    HIDDEN DIV 
</div> 


<!-- START PRELOADS --> 
<audio id="audio-alert" src="audio/alert.mp3" preload="auto"></audio> 
<!-- END PRELOADS --> 



<script> 
    /* PLAY SOUND FUNCTION */ 
    function playAudio(file){ 
     if(file === 'alert') 
      document.getElementById('audio-alert').play(); 

    } 
    /* END PLAY SOUND FUNCTION */ 


     jQuery(".hiddensounddivclick").on("click",function(){ 
      var box = $($(this).data("box")); 
      if(box.length > 0){ 
       box.toggleClass("open"); 

       var sound = box.data("sound"); 

       if(sound === 'alert') 
        playAudio('alert'); 


      }   
      return false; 
     }); 
</script> 

<style> 
.hiddensound { 
    display: none; 
} 

.hiddensound.open { 
    display: block; 
} 
</style> 

Fiddle: https://jsfiddle.net/wdp286q3/5/

Вам просто нужно будет установить аудио SRC на то, что он находится в директории.