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

【问题标题】：error when change onclick function to onload function将 onclick 函数更改为 onload 函数时出错
【发布时间】：2017-07-09 19:14:54
【问题描述】：

我有一个脚本，其中有一个开始播放声音的按钮。如果按钮被点击（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 函数的脚本可以工作了。

【问题讨论】：

尝试将onload 放在input#play 元素上，而不是window。
您必须等待音频元素加载，然后才能在脚本中获得其duration - 因此您不能在window.load 上使用。检查解决方案here。
How do you check if a HTML5 audio element is loaded?的可能重复
@skobaljic 脚本写在文档的最后，所以很好。
如果好的话，他也不会在这里提问。他正在使用无法访问的document.getElementById('suarabel').duration。他必须预加载所有音频文件以设置正确的超时时间。

标签： javascript jquery html function

【解决方案1】：

正如 skobaljic 的评论中所写 document.getElementById('suaabel').duration 尚未加载，您会得到 NaN，因此对其进行的任何数学运算都会给出 NaN。 totalwaktu 的所有计算都将给出 NaN，当 setTimeout 将 NaN 作为参数时，它将其转换为 0。在每个 totalwaktu 后面加上 console.log(totalwaktu) 看看这是否确实发生了

【讨论】：