Syncing HTML5 <video> with <audio> playback

Question

I am having track from one source, mute, and I\'d like to play background music over it using element. The tracks contain some time critical elements.

What would be th

Answer 1

There is no reliable solution. The only html5 feature that supported sync of multiple streams is mediaGroup. It was unshipped by Chrome and deprecated by w3c.

Answer 2

Mikko Ohtamaa provided a solution in a comment, which I actually think is the best option here - it doesn't require a framework, and it doesn't require you to edit your video files.

Essentially, just grab the current time from the video element when it is "unmuted", and apply that time to the audio element. Some code might look like this:

function unmute() {
  var vid = document.getElementById("video");
  var aud = document.getElementById("audio");

  aud.currentTime = vid.currentTime;
  aud.play();

}

Answer 3

Here is a simple solution using Popcorn.js inspired by this article.

$(function(){
var medias = {
    audio: Popcorn("#narration"),
    video: Popcorn("#video")
  },
  loadCount = 0,
  events = "play pause timeupdate seeking volumechange".split(/\s+/g); 


// iterate both media sources
Popcorn.forEach(medias, function(media, type) {

  // when each is ready... 
  media.on("canplayall", function() {

    // trigger a custom "sync" event
    this.emit("sync");

    // Listen for the custom sync event...    
  }).on("sync", function() {

    // Once both items are loaded, sync events
    if (++loadCount == 2) {
      // Uncomment this line to silence the video
      //medias.video.mute();

      // Iterate all events and trigger them on the video 
      // whenever they occur on the audio
      events.forEach(function(event) {

        medias.video.on(event, function() {

          // Avoid overkill events, trigger timeupdate manually
          if (event === "timeupdate") {

            if (!this.media.paused) {
              return;
            }
            medias.audio.emit("timeupdate");

            return;
          }

          if (event === "seeking") {
              medias.audio.currentTime(this.currentTime());
          }
          
          if (event === "volumechange") {  
        	  if(this.muted()) { 
        		  medias.audio.mute(); 
        	  } else {
        		  medias.audio.unmute(); 
        	  } 
        	  
        	  medias.audio.volume(this.volume());
          }

          if (event === "play" || event === "pause") {
            medias.audio[event]();
          }
        });
      });
    }
  });
});
});

  	<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
  	<script type="text/javascript" src="https://static.bocoup.com/js/popcorn.min.js"></script>
     
<audio id="narration">
	<source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorn101/popcorn101.ogg">
</audio>
<video id="video" controls="controls">  
	<source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorntest.mp4">
</video>

Answer 4

The same effect can be achieved by including the music in your video file itself. The html5 video player controls will have the ability to mute the sound.

Answer 5

Try VideoJS. At the time when the video playback starts when the page is loaded and ready, you are able to trigger a function which would start playing the music that is contained in the page separately.

http://videojs.com/

Answer 6

Easy with a very simple trick ;)

<video id="myvideo" controls muted loop>
    <source src="sample_video_no_sound.mp4" type="video/mp4"/>
    <audio id="myaudio">
        <source src="sound.mp3" type="audio/mpeg"/>
    </audio>
</video>

<script>
    var myvideo = document.getElementById("myvideo");
    var myaudio = document.getElementById("myaudio");

    var change_time_state = true;

    myvideo.onplay = function(){
        myaudio.play();
        if(change_time_state){
            myaudio.currentTime = myvideo.currentTime;
            change_time_state = false;
        }
    }

    myvideo.onpause = function(){
        myaudio.pause();
        change_time_state = true;
    }
</script>