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>

默认情况下隐藏（display：none;）。我需要在显示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>

小提琴： https://jsfiddle.net/wdp286q3/5/

您只需将音频src设置为目录中的任何内容即可。

在div显示器上播放声音文件

2 个答案: