why are these alerts not appearing?

问题

I am currently trying to time alerts to appear 3 seconds after the viewer grants permission of webcam. The alerts are supposed to also have audio with them, as they're supposed to be triggered at the same time.

The webcam has a face tracking feature with it, so there is a lot of extra code. So I don't know javascript, so please visuals help a lot more than statements.

This is my current code I am working with.

 <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>eve_</title>
      <link rel="stylesheet" href="assets/demo.css">
      <link rel="icon" rel="preload" href="images/evecircle.png" />
      <script src="../build/tracking-min.js"></script>
      <script src="../build/data/face-min.js"></script>
       <script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
      <script src="assets/stats.min.js"></script>
     <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <style>

      video, canvas {
        position: absolute;
      }
      </style>
    </head>
    <body onload="delayedAlert();">
      <div class="demo-title">

    <p><a href="http://trackingjs.com" target="_parent"></a></p>
  </div>

  <div class="demo-frame">
    <div class="demo-container">
      <video id="video" width="700" height="700" preload autoplay loop muted></video>
      <canvas id="canvas" width="700" height="700"></canvas>
    </div>
  </div>

 <audio>
  <source src="audio/hello.wav" type="audio/wav" preload=true>
 </audio>

 <audio>
  <source src="audio/is_something_here.wav" type="audio/wav" preload=true>
 </audio>

  <audio>
  <source src="audio/oh_something_is_here.wav" type="audio/wav" preload=true>
 </audio>


 <audio>
 <source src="audio/what_is_your_name.wav" type="audio/wav" preload=true>
 </audio>




  <script>
  var timeoutID;

  function delayedAlert() {
  timeoutID = window.setTimeout(slowAlert, 5000);
}


    window.onload = function() {
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var inverse = function inverse(imageData) {
    var data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        data[i] = 255 - data[i];
        data[i + 1] = 255 - data[i + 1];
        data[i + 2] = 255 - data[i + 2];
    }
     var audio= document.getElementsByTagName('audio')[0];
 const audio2 = document.getElementsByTagName('audio')[1];
 var audio3 = document.getElementsByTagName('audio')[2];
  var audio4 = document.getElementsByTagName('audio')[3];
    return imageData;
};
      var tracker = new tracking.ObjectTracker('face');
      tracker.setInitialScale(4);
      tracker.setStepSize(2);
      tracker.setEdgesDensity(0.1);

      tracking.track('#video', tracker, { camera: true });

      tracker.on('track', function(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);

        event.data.forEach(function(rect) {
          context.strokeStyle = '#0000ff';
          context.strokeRect(rect.x, rect.y, rect.width, rect.height);
          context.font = '13px Helvetica';
          context.fillStyle = "#fff";
          context.fillText('x: ' + rect.x + '3px', rect.x + rect.width + 5, rect.y + 11);
          context.fillText('y: ' + rect.y + '3px', rect.x + rect.width + 5, rect.y + 22);
        });
      });

      var gui = new dat.GUI();
      gui.add(tracker, 'edgesDensity', 0.5, 0.5).step(0.1);
      gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
      gui.add(tracker, 'stepSize', 1, 5).step(0.1);
    };

    function slowAlert() {
 var audio= document.getElementsByTagName('audio')[0];
 const audio2 = document.getElementsByTagName('audio')[1];
 var audio3 = document.getElementsByTagName('audio')[2];
  var audio4 = document.getElementsByTagName('audio')[3];

audio.play(); 
var myvar1;alert('Hello?');

audio2.play(); 
var myvar1;alert('Is something here?');

audio3.play();
var myvar2;alert('Something is here.');

    };
    </script>

         <audio>
  <source src="audio/hello.wav" type="audio/wav" preload=true>
 </audio>

 <audio>
  <source src="audio/is_something_here.wav" type="audio/wav" preload=true>
 </audio>

  <audio>
  <source src="audio/oh_something_is_here.wav" type="audio/wav" preload=true>
 </audio>


 <audio>
 <source src="audio/what_is_your_name.wav" type="audio/wav" preload=true>
 </audio>

</body>
</html>

回答1:

It seems like you forgot to call delayedAlert()

来源：https://stackoverflow.com/questions/49614750/why-are-these-alerts-not-appearing

标签

javascript

alert

webcam

tracking

timing