CurrentTime, very strange behaviour

[Entity_]

I'm try to make an event fire on a certain current time, but for some reason the event would not fire. To check what the problem was, I used the following code and monitored the console to see the results:

<script>

    var Sound1 = document.getElementById("player");
    if (Sound1.play) {
        alert("it's playing");
    }
    setInterval(function () { console.log(Sound1.currentTime); }, 250)

</script>

So, I first added the currentTime monitor to tell me if the time went above the thresh hold that I want to fire the event I mentioned, but It never goes above zero on the console. It stays on zero. The sound must not be playing, right? Wrong. I added the code above the interval to see if the sound actually plays, and it does! I must have made a basic error along the way but I can't see what it is! Can anyone please help me?

[Old Pedant]

Well, the most obvious thing: Does Sound1.currentTime actually produce any values, at all? Are you using the right property?

Where are the docs for the player you are using? What do they say?

[Entity_]

<audio id="player" autoplay loop>
  <source src="assets/birds.mp3" type="audio/mpeg">
  <source src="assets/birds.ogg" type="audio/ogg">
  <source src="assets/birds.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>

The player I'm using is just a basic HTML5 audio element. As for sound1.currentTime, no it doesn't seem to produce a value above 0 unless I misunderstand your question. I'm not sure why this is happening though, as I've used the value before with no problems.

[Old Pedant]

I know it *shouldn't* matter, but...

Try this:

<script type="text/javascript">
function Check( )
{
    var p = document.getElementById("player");
    alert( "player is playing? " + p.play 
           + ", has been playing " + p.currentTime );
}
setInterval( Check, 1000 );
</script>

And if that works then try changing alert to console.log and if that works I think you are home free.

[Entity_]

Ok so now I know my audio is playing, thankyou very much. But my original post eluded to another problem, for which I created that code snippet. If you'd be so kind and if you have the time maybe you could help me, because the result of actually knowing that the file is playing is even more confusing.

    
    var birdSound = document.getElementById("player");
    var coverBirds = document.getElementById("coverBirds");
    var trigger = 2;
    
    

    birdSound.addEventListener('timeupdate', function () {
            console.log(birdSound.currentTime);
            if (coverBirds.paused) {
            if (birdSound.currentTime > trigger ) {
                alert("eventalert");
                birdSound.play
           }
     }
});

There is the code. It basically plays one audio element (coverBirds) at a specific time in another audio element (birdSound). It does this by checking if coverBirds is not playing, if it's not playing it checks to see if the time of birdSound has passed the allowed thresh hold set by the trigger variable. It's set up in this way so the timeupdate will not spam the sound file upon the condition being met. The problem is somewhere is the event listener i think. I think this because I added the console.log line to see if it was firing properly and instead it fired twice and that's it. Is there something I'm doing wrong?

P.S Thanks in advance for your time, if you decide to help

[Old Pedant]

Well, see, my *GUESS* was that for some reason when you got the reference to the playing sound via

    var birdSound = document.getElementById("player");

that for some reason that was getting the state of the player *AT THE TIME* of that assignment. (Don't ask me why! Shouldn't be true, but...)

So since my code above seemed to work, it seems to me the answer is to just move that assignment inside the function:

But... but with this new code, I don't see any reason to refer to that variable, anyway.

What about:

    birdSound.addEventListener(
        'timeupdate', 
        function () {
            console.log(this.currentTime);
            if (coverBirds.paused) 
           {
                if (this.currentTime > trigger ) 
                {
                    alert("eventalert");
                    birdSound.play; // **** IS THIS RIGHT ??? ****
                }
           }
       }
    );

But in that code, shouldn't birdSound.play really be coverBirds.play ?

And are you sure it should be .play? You used that property, above, to indicate that the element *is* playing (or not). Here you seem to be wanting to invoke a *method* that tells it to start playing?

I just checked the docs. I'm right. To start something playing you use .play( ) -- call the method. Using just .play doesn't tell you anything except whether the object in question *has* a play method! So you were using it wrong all along.

So I *think* the line in question should be coverBirds.play( )

Assuming I understand your intent.

[Entity_]

    var birdSound = document.getElementById("player");
    var coverBirds = document.getElementById("coverBirds");
    var trigger = 5;
    
    

    birdSound.addEventListener(
       'timeupdate',
       function () {
           console.log(this.currentTime);
           if (coverBirds.paused) {
               if (this.currentTime > trigger) {
                   console.log("eventalert");
                   coverBirds.play(); 
               }
           }
       }
   );

Sorry for not making it clearer before. I quickly typed in the birdSound.play line you found because I had I hadn't actually got round to calling the new sound first. I wanted to first make sure it was working, and it still isn't. Here's where I'm at now. This whole code works fine if you change the conditional

 if (this.currentTime > trigger)

to

 if (this.currentTime < trigger)

But if I keep it as > it just does nothing. While you are indeed astute for noticing the birdSound problem, that's something I typed in while writing the forum post just to make it clearer, but I accidentally typed the wrong variable and got the syntax wrong, so it's not the main problem with the code. I'm sure the issue is somewhere with the > as it works if you tell it to go <, and I've commented out successive lines until only this line remained.

[Entity_]

nevermind, copying the variable assignment inside the function fixed everything, issue closed. Thanks pedant.

[Old Pedant]

Originally Posted by Entity_

nevermind, copying the variable assignment inside the function fixed everything

That is *SO* weird. As I said, that was just a hunch of mine. I don't pretend to see why it matters, but if it does, it does.