CODEWITHSUNDEEP
htmlhtml5-videohtml5-audio
akonsu
akonsu

Reputation: 29536

how to mix in audio to html5 video?

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?

Upvotes: 2

Views: 4491

Answers (2)

LONGI
LONGI

Reputation: 11443

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 )

Upvotes: 3

Edvin Antonov
Edvin Antonov

Reputation: 21

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>

Upvotes: 0

Related Questions