error when change onclick function to onload function

Question

I have a script where there is a button to start playing sound. If the button is clicked (onclick), then the sound will be played in sequence.

here the script:

<!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>

I tried to replace onclick with onload function, but if I use the onload function, the sound is played simultaneously and not sequentially.

In Javascript

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

or In JQuery

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

edited: i change the line

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

with this

totalwaktu=5000;

and now my script with onload function work.

try putting the `onload` on the `input#play` element instead of `window`. — cst1992, Jul 09 '17 at 10:42
You gotta wait for audio element to load, before you get its `duration` in script - therefor you **cannot** use on `window.load`. Check the solution [here](https://stackoverflow.com/questions/8059434/how-do-you-check-if-a-html5-audio-element-is-loaded). — skobaljic, Jul 09 '17 at 10:42
Possible duplicate of [How do you check if a HTML5 audio element is loaded?](https://stackoverflow.com/questions/8059434/how-do-you-check-if-a-html5-audio-element-is-loaded) — skobaljic, Jul 09 '17 at 10:43
@skobaljic The script is written at the end of the document, so it's good. — cst1992, Jul 09 '17 at 10:43
If it was good, he wouldn't ask a question here. He is using `document.getElementById('suarabel').duration` which is not accessible. He would have to preload all audio files to set correct timeouts. — skobaljic, Jul 09 '17 at 10:44
@skobaljic , thanks for the answer. after i change totalwaktu=document.getElementById('suarabel').duration*1000; with 5000 (manualy set totalwaktu), the script with onload function work fine. and i'll try to learn from the link you provide. — Gumilar, Jul 09 '17 at 11:08

score 0 · Answer 1 · answered Jul 09 '17 at 11:14

As written in the comment of skobaljic document.getElementById('suarabel').duration is not loaded yet and you get NaN so any mathematical operation on it will give NaN. All calculation of totalwaktu will give NaN and when setTimeout get NaN as parameter it converts it to 0. Put console.log(totalwaktu) after each totalwaktu to see if this indeed happened

error when change onclick function to onload function

1 Answers1