NEW306350
AX: Syncing currentTime of Audio and Video elements results in playback offset 
https://bugs.webkit.org/show_bug.cgi?id=306350
Summary AX: Syncing currentTime of Audio and Video elements results in playback offset
sebastian.bayer
Reported 2026-01-27 09:43:52 PST
The accessibility (a11y) plugin for the JavaScript library "MediaElement" implements audio descriptions for videos. It does this by creating an additional <audio> element on the page and synchronizing its currentTime with the video during the video’s native "timeupdate" event. This approach works correctly in Chrome and Firefox, but in Safari it causes choppy or interrupted audio playback. I know a WebVTT-based synthesized audio description would be a better solution, but OS support is disabled by default for this, see https://bugs.webkit.org/show_bug.cgi?id=266724 and support for this <track kind="descriptions"> in other browsers seems non-existent: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track#browser_compatibility Here's an example for my use-case (Safari): https://www.bmas.de/SharedDocs/Videos/DE/Ministerium/Arbeiten-im-BMAS/bmas-was-arbeit-fuer-uns-ist.html Play the video and activate the "AD" Button in the video controls for "choppy" audio description. I boiled this down and it has nothing to do with MediaElement itself. Instead there seem to be two separate Webkit Bugs here: 1. Whenever I set the currentTime of an <audio> in Safari, even when I'm just seeking a few milliseconds, I hear no audio for a moment until it resumes playing. In Chrome and Firefox the playback is much more consistent. 2. When I set the currentTime of an <audio> element, it is always a bit offset, not at the exact time I want to set it. Possibly a duplicate of https://bugs.webkit.org/show_bug.cgi?id=240568 In my use-case, both problems together result in a "choppy" playback because Safari keeps syncing the video and audio all the time due to my JS syncing logic. Here's my boiled-down example that reproduces the problem. Play the video, press the "SYNC" button and check in Safari console that the new currentTime is always a bit offset, resulting in the "choppy" audio playback. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Safari Video Sync PoC</title> <style type="text/css"> video, audio { display: block; } </style> </head> <body> <video id="video1" width="750" height="421" controls preload="auto" playsinline poster="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/2e7945298d864445b79c120be1eeb87c"> <source src="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/0e7a69b999dc4dad8b632d323909d1a1" type="video/mp4" /> </video> <audio id="audio1" controls preload="auto"> <source src="https://delivery-aktion-mensch.stylelabs.cloud/api/public/content/72091bbef9494cc6a8da57179d69099c" type="audio/mp3" /> </audio> <button id="sync" style="margin: 20px;padding: 20px;">SYNC</button> <script> const video = document.getElementById('video1'); const audio = document.getElementById('audio1'); const sync = document.getElementById('sync'); video.addEventListener('playing', () => { video.volume = 0; audio.play(); }); video.addEventListener('pause', () => { audio.pause(); }); video.addEventListener('seeked', () => { audio.currentTime = video.currentTime; }) video.addEventListener('timeupdate', () => { const timeDifference = Math.abs(video.currentTime - audio.currentTime); console.log(timeDifference); if (timeDifference > 0.3) { audio.currentTime = video.currentTime; } }); sync.addEventListener('click', () => { audio.currentTime = video.currentTime; }); </script> </body> </html> mediaelement a11y Plugin Docs: https://github.com/mediaelement/mediaelement-plugins/blob/master/docs/a11y.md Source: https://github.com/mediaelement/mediaelement-plugins/blob/master/src/a11y/a11y.js Tested in Safari Version 26.1
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2026-01-27 09:43:58 PST
<rdar://problem/169014726>
Note You need to log in before you can comment on or make changes to this bug.