title: Play an audio some time after another audio has ended while in a for-loop
body: <p>Currently I'm designing a Web application (game) on Tizen where I want to:</p>
  
  <ol>
  <li>Display an image</li>
  <li>Play an audio clip(around 15-17 seconds long)</li>
  <li>Do nothing for 5 seconds</li>
  <li>Play another audio clip(about 2-3 seconds)</li>
  <li>Hide the image</li>
  </ol>
  
  <p>These steps are to be performed in a loop (N times) in order. However, when I run my App on the emulator, it plays all the sounds to be played on step 2 together at the same time while the image is never visible.</p>
  
  <p>Following is my Javascript function:</p>
  
  <pre><code>         function performTask(image, audioName) { //sending id for image and audio,  e.g.: performTask("img1", "aud1")
  
              // Show the image
              img = document.getElementById(image);
              if (img &amp;&amp; img.style) {
                  img.style.height = screen.height;
                  img.style.width = screen.width;
                  img.style.visibility = "visible";
              } else {
                  console.log("exercise(): error in setting image");
              }
              // play the audio
              try {
                  myAudio = document.getElementById(audioName);
                  myAudio.play();
                  myAudio.onended = function() {
                      timeOut();
                  };
              } catch (error) {
                  console.error("exercise(): " + error.message);
              }
              // after 30 seconds, ring the bell!!
              try {
                  console.log("playing bell");
                  document.getElementById("bell").play();
              } catch (error) {
                  console.error("bell: " + error.message);
              }
              //hide image
              img.style.visibility = "hidden";
          }
  </code></pre>
  
  <p>The timeOut() function:</p>
  
  <pre><code>        var timer = 5000;
          function timeOut() {
              if (timer &gt; 0) {
                  setTimeout(timeOut(), timer--);
              }
           }
  </code></pre>
  
  <p>The structure of the HTML page where this is called:</p>
  
  <pre><code>        ...
          &lt;body onload="someFunc()"&gt; &lt;!-- this calls performTask() in a for-loop--&gt;
          &lt;p&gt;
              &lt;img src='images/image1.png' alt="pose1n12" id="img1" /&gt;
          .... 10 more such images
          &lt;/p&gt;
          &lt;p&gt;
              &lt;audio id="bell"&gt;
                  &lt;source src='audio/bell.mp3' type="audio/mpeg" /&gt;
              &lt;/audio&gt;
              &lt;audio id="aud1"&gt;
                  &lt;source src='audio/aud1.mp3' type="audio/mpeg" /&gt;
              &lt;/audio&gt;
          .... 10 more such clips
          &lt;/p&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> Adding the definition for someFunc()</p>
  
  <pre><code>     function someFunc() { 
          var a;
          image = ''; // select image at particular count
          audioName = ''; // select respective audio
          for (a = 1; a &lt;= 12; a++) { // the asana tracker loop
              switch (a) { // assigns image &amp; audio
              case 1:
                  image = "img1n12";
                  audioName = "1N12";
                  break;
              ...... continues till case 12
              }
          }
          performTask(image, audioName);
          }
  </code></pre>
  
  <p>Please help.</p>