4
\$\begingroup\$

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.

\$\endgroup\$
3
\$\begingroup\$

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.

<audio> and <video> 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 > 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
  }
});
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.