I'm currently working on an application that uses the AudioContext api to control audio for both video clips and background audio. We would like to use the AudioContext (and therefore MediaElementAudioSourceNodes
) so we can make adjustments to the audio programmatically.
Because the application is syncing up media to a timeline, this often means adjusting the playbackRate
of the media element to catch up. In Chrome, this works fine: you adjust playbackRate
and the media speeds up or slows down accordingly. Now in Safari, any audio piped through a MediaElementAudioSourceNode
will not respect the changed media playbackRate
, playing the audio at normal speed and will then sputter out after a few seconds. (Safari audio will respect the playbackRate
when played directly from the media element, notably without pitch correction, but that is a separate, known, issue)
Here's a CodeSandbox that replicates the issue. The first player on the page will play audio back coming directly from the HTMLMediaElement
, where as the second player will pipe it through a MediaElementAudioSourceNode
.
We've tried a couple other avenues, such as using an AudioBufferSourceNode
for the audio source, but due to the size of clip we're often working with, this is not a desired avenue. If at all possible, we would like to still use the AudioContext
api for both Chrome and Safari as well.