CODEWITHSUNDEEP
javascripthtmlaudio
DontAsk_
DontAsk_

Reputation: 182

How would I make an event listener on an audio tag in Javascript?

I have an audio tag in my page that's going to be a few minutes long and I want it to preform different functions at different times in the audio. As an example to log something at a certain time.

Example code

document.querySelector("audio").addEventListener("executes every second of the audio", e => { 
    if(audio.time == 60) console.log("audio has reached 60 seconds")
})

Upvotes: 0

Views: 157

Answers (1)

Adrian Gh.
Adrian Gh.

Reputation: 57

<!DOCTYPE html>
<html>

<head>
    <title>Function calls at different times in the audio.</title>
</head>

<body>
    <audio src="filename.mp3"></audio>
    <button onclick="playAudio()">Play</button>
    <script>
        function playAudio() {
            var audio = document.querySelector("audio")
            audio.play();
            var timeCounter = 0
            setInterval(function() {
                timeCounter += 100;

                if (timeCounter === 1000) {
                    console.log("first second");
                    //function call
                }

                if (timeCounter === 3500) {
                    console.log("three seconds and a half");
                    //function call
                }
            }, 100);
        }
    </script>
</body>

</html>

Upvotes: 1

Related Questions