CODEWITHSUNDEEP
javascripthtmlaudiosynchronizationdelay
Alexander
Alexander

Reputation: 1248

How can you make a negative audio delay with a video playing in html5, with javascript?

I have an mp4 video that is on my server and I view it in my browser with the HTML player. How can I adjust the audio/video sync with javascript? The audio and video are not two separate files. I want the audio to be something like 200 ms behind the video so that they can line up fine when having Bluetooth headphones that are laggy.

Upvotes: 1

Views: 1284

Answers (1)

user14777932
user14777932

Reputation:

You try to seperate your audio and then open both; video before 200ms and then the audio...

Then you may use audio like this...

<html>
<body>

<audio id="myAudio">
  <source src="AUDIO.ogg" type="audio/ogg">
  <source src="AUDIO.mp3" type="audio/mpeg">
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>

</body>
</html>

Then try... Or you can: -

  1. Edit your video and make audio delay...
  2. You can use javascript to delay audio...
    Eg:
<html>
<head>
  <title>My Audio</title>
</head>
<body>
  <audio src="AUDIO.mp3" id="my_audio" loop="loop"></audio>
  <script type="text/javascript">
    setTimeout(function(){
      document.getElementById("my_audio").play();
      console.log('your audio is started just now');
    }, 8000)
  </script>
</body>
</html>

HAPPY CODING!!!

Upvotes: 2

Related Questions