Playing different audio files based on video keyframe
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.

&lt;audio&gt; and &lt;video&gt; elements are HTMLMediaElements 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 &gt; 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
  }
});