how to mix in audio to html5 video?

Question

I have a video element, for example

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

I need to mix in an audio file so that when the user starts the video, the audio file plays along with the video, and when the movie stops/rewinds the audio would do the same. I did not find any functionality in the HTML5 video/audio API's that would allow me to do that. Does anyone know if this is even possible?

I guess I can have two separate elements on the page, one for video and one for audio and have them controlled by a script that intercepts events from the video player, but I thought that maybe there is a way to do it using the APIs? I know that for audio I can mix different files, but can I do the same with video?

Answer 1

You have to listen to the events of html5 video. In your case this should be play pause ended and seeking here is an example player which lists all events.

//HTML
<video id="videoInHTML" width="320" height="240" controls="controls">.....

//Javascript
var yourVideoElement = document.getElementById("videoInHTML");
yourVideoElement.addEventListener('play', videoPausePlayHandler, false);
yourVideoElement.addEventListener('pause', videoPausePlayHandler, false);

function videoPausePlayHandler(e) {
  if (e.type == 'play') {
    // play your audio
  } else if (e.type == 'pause') {
    // pause your audio
  }
}

Shot in the dark with seeking. Listen to the seeking Event. If player is seeking = true -> yourAudioFile.seekToTime( yourVideoElement.currentTime )

Answer 2

I'm not so good in it. But these code was useful to me and it should work for you as well.

<!DOCTYPE>
<meta charset="UTF-8">
<title> audio video</title>

<audio id="audioInHTML" controls="controls">     
<source src="audio.wav" type="audio/wav"/>
</audio>
</div>

<video id="videoInHTML" width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
</video>

<div id="playButtonDiv" </div>

<form>
<input type="button" value="PlaySoundAndVideo" onClick="PlaySoundAndVideo('videoInHTML'),PlaySoundAndVideo('audioInHTML')">

</div>

<script>

function PlaySoundAndVideo(soundObj,videoObj) {
var soundAndVideo=document.getElementById(soundObj,videoObj);
soundAndVideo.play();
}


</script>

<style type="text/css">


#playButtonDiv {
position:absolute;
top:800px;

};   

</style>