Trigger JavaScript events at specific points in an audio

Question

I am playing an ogg file using an Audio object in JavaScript. I am trying to synchronise visual events with the position of the audio.

audio.ontimeupdate seems to trigger with a specific regularity. Is there a way I can instead set time markers and have an event fired as close as possible to the exact moment that the audio plays that point in the sample.

        let audio = new Audio(`audio/${filename}`);

        let timings = [1, 1.1, 1.2, 1.3, 1.4, 1.5, 2.0, 2.1, 2.2, 2.3, 2.4, 2.5];
        audio.ontimeupdate = function () {
            let time = audio.currentTime;
            while (timings.length > 0 && timings[0] <= time) {
                console.log(`Waiting for ${timings[0]}, audio time = ${time} : late by ${time - timings[0]}`);
                timings.splice(0, 1);
            }
        }

The output here is just not close enough to the subscription points. One is late by a quarter of a second.

• Waiting for 1, audio time = 1.160022 : late by 0.1600220000000001
• Waiting for 1.1, audio time = 1.160022 : late by 0.06002200000000002
• => Waiting for 1.2, audio time = 1.441972 : late by 0.24197200000000008
• Waiting for 1.3, audio time = 1.441972 : late by 0.141972
• Waiting for 1.4, audio time = 1.441972 : late by 0.04197200000000012
• Waiting for 1.5, audio time = 1.719637 : late by 0.21963700000000008
• Waiting for 2, audio time = 2.000272 : late by 0.00027199999999982793
• Waiting for 2.1, audio time = 2.277074 : late by 0.17707399999999973
• Waiting for 2.2, audio time = 2.277074 : late by 0.07707399999999964
• => Waiting for 2.3, audio time = 2.556553 : late by 0.25655300000000025
• Waiting for 2.4, audio time = 2.556553 : late by 0.15655300000000016
• Waiting for 2.5, audio time = 2.556553 : late by 0.056553000000000075

Answer 1

This is what I did. I set a timeout for the first event time and then start to play the audio.

When the event is triggered I check if it is too soon (delay playing the audio) and if it is then I set another timeout for nextEventTime - currentTime.

When the event is triggered and it is not too soon, then I dequeue event times until the next value is in the future. This is giving me a discrepancy of only about 20 milliseconds, which is definitely good enough!

class AudioClip {
    constructor(url, eventTimings) {
        this._audio = new Audio(url);
        this._filename = filename;
        this._eventTimings = eventTimings || [];
        this._timeoutId = null;
    }

    play() {
        if (!this._audio.paused) {
            return;
        }
        this._setTimeoutForNextEvent();
        this._audio.play();
    }

    pause() {
        if (this._audio.paused) {
            return;
        }
        this._clearTimeout();
        this._audio.pause();
    }

    dispose() {
        this.pause();
    }

    _setTimeoutForNextEvent() {
        let _this = this;

        this._clearTimeout(this);
        if (this._eventTimings.length > 0) {
            let delayMs = this._eventTimings[0] - (this._audio.currentTime * 1000);
            this._timeoutId = setTimeout(() => { _this._triggerCurrentEvent(); }, delayMs);
        }
    }

    _triggerCurrentEvent() {
        this._clearTimeout();

        // If we are too early, wait
        let nextEventTimeSeconds = this._eventTimings[0] / 1000;
        let audioTime = this._audio.currentTime;
        if (audioTime < nextEventTimeSeconds) {
            this._setTimeoutForNextEvent();
            return;
        }

        // Otherwise, trigger the event
        while (this._eventTimings.length > 0 && this._eventTimings[0] <= audioTime) {
            console.log(`At ${this._audio.currentTime}: Event = ${this._eventTimings[0]}`);
            this._eventTimings.splice(0, 1);
        }
        this._setTimeoutForNextEvent(this);
    }

    _clearTimeout() {
        if (this._timeoutId) {
            clearTimeout(this._timeoutId);
            this._timeoutId = null;
        }
    }
}