I'm having audio issues with my system, resulting in occasional cracks or stuttering, and desynchronization of video/audio.
Different programs and contexts deal differently with this. Thus, for my most common case of YouTube videos, I can re-sync A/V on pre-"Quantum" Firefox (v<57) by simply pausing and un-pausing the video after a sec; but on modern browsers like Chrome v96.0.4664.45 (Official Build) (64-bit), the old, misaligned buffer is being preserved.
Sure, that's smart for when things go right, but what if things go wrong?
I'd like to know of ways to invalidate buffers, triggering a re-evaluation of the audio and video tracks, in my case to make sure they're in sync again. HTMLMediaElement.buffered is read-only, and the range objects therein don't provide any interface for modification either.
My most common issue where I'm still lacking a solution is videos in web browsers, and most commonly on YouTube.
I tried changing the src value by appending a query string with videoElement.src += "?refresh=" + Math.random(0,1); or a mere "hash"/DOM reference by using a pound sign ("#") instead, but YouTube returns a "NOT FOUND" on all the usual blob resources I'm operating on.
Now I'm stuck.
All the properties of the DOM elements I'm looking at which seem to be useful, are read-only (like the HTMLMediaElement.buffered ranges)
Is there no way to signal to the browser to invalidate the hitherto assembled buffer of A/V and re-evaluate things based on the current time position?
I revisited this issue the other day.
Turns out, a simple call of .load() might do the trick 🤦♂️
This might differ between browsers and webapps, but this should be a good starting point in any case:
function reloadMedia(v){
var t = v.currentTime;
v.load();
v.play(); // usually not needed; included for good measure
v.currentTime = t; // usually not needed; included for good measure
}
In the case of current Chrome and YouTube, it seems to work perfectly well even without resetting the time and calling play() again.