you could add a react context that essentially wraps this function and expose the API, ex:
const [audioState, audioControl] = useAudioManager()
audioControl.pause() -> calls setState in the context setAudioState(AudioState.PAUSED)
and there is a useEffect in the context level like so
useEffect(() => {
if (audioState === 'PAUSED') {
// your document query selector
}
}, [audioState])
the idea here, is still to have a reactive state management that talks to DOM manipulation so the state will not drift as more callsites added (more components can pause/resume for example)