patternjavascriptMinor

Playing different audio files based on video keyframe

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

playingvideodifferentaudiofilesbasedkeyframe

Problem

The general idea of this function is to load a different sound file depending on current time position of the video. I have the following information about audio files:

var samples: [ 
['00:00:05', 'audio/1.mp3'],
['00:01:00', 'audio/2.mp3']
]

The first element contains the end time for specific audio sample, and the second is the sample. I think we don't need the start time, because the following condition should return a good result:

if( video.currentTime <= endTime ) { ... }

Anyway, here is the code of function I'm using to check which audio file to play (it's executed when the video is paused):

var APP.playAudio = function() { 

    var pAudio = samples; // the array above

            for(var i = 0; i < pAudio.length; i++ ) {

                if( video.currentTime < hms_to_s(pAudio[i][0]) ) {
                    pCurrentAudio = pAudio[i][1];
                    break;
                }

            }
}

I'm looking for more tricky and clever way to achieve this. As you see, now we iterate over the pAudio array each time the video is paused.

Solution

You want to play a certain audio at a certain time? Well, you're in luck. I recently did this in a demo. It wasn't playing audio with video though. It was triggering animations at certain points of the audio, but it should be the same idea.

` and elements are HTMLMediaElement

s and have media events.

- 
If you want to play your mapped audio in real time, there is the

timeupdate

 event which is triggered when the current time of the element has changed.

- 
If you want to play it during pause, then there is the

paused

 event.

You can use these events to check the

currentTime of your element, which in this case is your video. currentTime is in seconds. If you want to stick to your hh:mm:ss

 format, you'd need your own converter. 

Instead of urls, you should have preloaded audio elements there so that they will play instantly when we need them.

Anyways, here's a sample structure with seconds and audio elements

var samples = [
  [5,HTMLAudioElement],
  [10,HTMLAudioElement],
  [15,HTMLAudioElement],
  ...
];


Then, hook to the

timeupdate` event of the video, check the current time, and compare with the indicated item in the array. You can use a counter to indicate your current position.

var i = 0
//get first audio as current audio and play
var currentAudio = samples[i][1].play();

video.addEventListener('timeupdate',function(){

  //if video time is greater than current audio end time
  if(this.currentTime > samples[i][0]){
    if(currentAudio) currentAudio.pause(); //pause existing audio (maybe do a "seek to zero" to reset)
    currentAudio = samples[++i][1];        //reference next audio as current
    currentAudio.play();                   //play the current audio
  }
});

Code Snippets

var samples = [
  [5,HTMLAudioElement],
  [10,HTMLAudioElement],
  [15,HTMLAudioElement],
  ...
];

var i = 0
//get first audio as current audio and play
var currentAudio = samples[i][1].play();

video.addEventListener('timeupdate',function(){

  //if video time is greater than current audio end time
  if(this.currentTime > samples[i][0]){
    if(currentAudio) currentAudio.pause(); //pause existing audio (maybe do a "seek to zero" to reset)
    currentAudio = samples[++i][1];        //reference next audio as current
    currentAudio.play();                   //play the current audio
  }
});

Context

StackExchange Code Review Q#26844, answer score: 3

Revisions (0)

No revisions yet.