Question

我有一个脚本，其中有一个按钮可以开始播放声音。如果单击该按钮（onclick），则将按顺序播放声音。

这里是剧本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../syle.css" />
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
</head>
<body>
    <audio id="suarabel" src="../panggilan/bell.wav"></audio>
    <audio id="suarabelnomorurut" src="../panggilan/nomor.wav"  ></audio> 
    <audio id="suarabelsuarabelloket" src="../panggilan/loket.wav"  ></audio> 
    <audio id="huruf_loket" src="../panggilan/a.wav"  ></audio>
    <audio id="huruf_nomor" src="../panggilan/1.wav"  ></audio>
    <audio id="suarabelloket1" src="../panggilan/1.wav"  ></audio>

    <div class="kontainer2">
      <div align="center">
        <input id="play" name="play" onclick="mulai();" type="button" value="Panggil" />
      </div>
    </div>  

<script type="text/javascript">
function mulai(){
    //Play Bell
    document.getElementById('suarabel').pause();
    document.getElementById('suarabel').currentTime=0;
    document.getElementById('suarabel').play();

    //delay before squence      
    totalwaktu=document.getElementById('suarabel').duration*1000;   

    //play number voice     
    setTimeout(function() {
            document.getElementById('suarabelnomorurut').pause();
            document.getElementById('suarabelnomorurut').currentTime=0;
            document.getElementById('suarabelnomorurut').play();
    }, totalwaktu);
    totalwaktu=totalwaktu+1600;
                setTimeout(function() {
                        document.getElementById('huruf_nomor').pause();
                        document.getElementById('huruf_nomor').currentTime=0;
                        document.getElementById('huruf_nomor').play();
                    }, totalwaktu);
                totalwaktu=totalwaktu+1000;

        totalwaktu=totalwaktu+1000;
        setTimeout(function() {
                        document.getElementById('suarabelsuarabelloket').pause();
                        document.getElementById('suarabelsuarabelloket').currentTime=0;
                        document.getElementById('suarabelsuarabelloket').play();
                    }, totalwaktu);

        totalwaktu=totalwaktu+1000;
        setTimeout(function() {
                        document.getElementById('suarabelloket1').pause();
                        document.getElementById('suarabelloket1').currentTime=0;
                        document.getElementById('suarabelloket1').play();
                    }, totalwaktu); 

        totalwaktu=totalwaktu+750;
        setTimeout(function() {
                        document.getElementById('huruf_loket').pause();
                        document.getElementById('huruf_loket').currentTime=0;
                        document.getElementById('huruf_loket').play();
                    }, totalwaktu); 
}
</script>
</body>
</html>

我尝试用onload函数替换onclick，但是如果我使用onload函数，声音会同时播放而不是顺序播放。

在Javascript中

window.onload=function(){
    mulai();
};

或在JQuery中

$(document).ready(function(){
   mulai();
});

编辑：我改变了行

totalwaktu=document.getElementById('suarabel').duration*1000;

用这个

totalwaktu=5000;

现在我的onload函数脚本工作了。

Answer 1

正如skobaljic的评论所写 document.getElementById（'suarabel'）。持续时间尚未加载，你得到NaN所以任何数学运算都会给NaN。 totalwaktu的所有计算都将给出NaN，当setTimeout得到NaN作为参数时，它将其转换为0。在每个totalwaktu之后放console.log(totalwaktu)看看这是否确实发生了

将onclick函数更改为onload函数时出错

1 个答案: