# Video not syncing to audio correctly when playing in Firefox

**URL:** <https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339>\
**Category:** Coding Questions\
**Created:** [May 28, 2021, 3:57pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339 "2021-05-28T15:57:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![karenmani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karenmani/32/13359_2.png) [@karenmani](https://discourse.processing.org/u/karenmani)\
**Post date:** [May 28, 2021, 3:57pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339/1 "2021-05-28T15:57:59Z")

</div>

Hi!

I’m trying to create a video player using p5 that a user can hit “start video” on and then can pan audio using a slider. I used the video tag in html to source the vids in multiple formats from my directory and then used document.getElementById in my js file to call them and play/stop them. However, I’m finding that in Firefox, the video and audio aren’t entirely syncing. Is there a way to specify video formats without using createVideo() to instantiate a video player?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 28, 2021, 4:49pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339/2 "2021-05-28T16:49:50Z")

</div>

Hi! I switched the category from processing (java) to p5.js (javascript).

do you want to elaborate it a bit more or ideally share the code? I don’t get whether you are using `<video>` tag and selecting them with `getElementById` or you are using `createVideo` to load the videos.

---

<div class="post-metadata">

**Author:** ![karenmani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karenmani/32/13359_2.png) [@karenmani](https://discourse.processing.org/u/karenmani)\
**Post date:** [May 28, 2021, 4:56pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339/3 "2021-05-28T16:56:32Z")

</div>

Hi!

Thanks! I used `<video>` and `getElementById` to load videos. I’m linking the Google drive folder to my directory [here](https://drive.google.com/drive/folders/1uLf8ZYHZzX7CQmIH7fQcoxnRUH2k7d9I?usp=sharing) since some of the files are too big to upload to the p5 editor or to github.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 28, 2021, 5:25pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339/4 "2021-05-28T17:25:19Z")

</div>

I haven’t tested the code but how you do it may not sync video and audio. I would set the playback time based on one reference - say take `currentTime` from the video element and set audio elements’ `currentTime` to the same time. But this will still not perfectly sync the playback because of the timing difference of `play()` methods being triggered.

> **[HTMLMediaElement.currentTime - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime)**
>
> The HTMLMediaElement interface's
> currentTime property specifies the current playback time
> in seconds.

---

<div class="post-metadata">

**Author:** ![karenmani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karenmani/32/13359_2.png) [@karenmani](https://discourse.processing.org/u/karenmani)\
**Post date:** [May 28, 2021, 5:27pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339/5 "2021-05-28T17:27:21Z")

</div>

Got it. So a follow up question. If I just use the original video with all audio attached to it, how can I split the audio channels or streams so that I can pan one voice in the video left and the other right and adjust their volumes with the slider? Or do you suggest any better methods to pan the separate voices that are connected to the audio of the video?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 28, 2021, 5:44pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339/6 "2021-05-28T17:44:34Z")

</div>

you can create a web audio node from `<audio>` or `<video>` and then connect it to a panner node

> **[MediaElementAudioSourceNode - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaElementAudioSourceNode)**
>
> The MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 or element. It is an AudioNode that acts as an audio source.

But this is a bit complicated. I don’t know, alternatively, p5.Sound can take a `<video>` element as a source.

I suggest, if you are using static (prerecorded) video, simply separate the video using ffmpeg or similar tools in advance, which makes it so much easier.

By the way you seem to use old version of p5.js (0.7.2). The sound library in this version may lack some features. But beware, upgrading to the current version of p5.js may break something.