How to stop background audio when playing video or audio in components?

Question

JavaScript

There is a template in app vue that has a router-view for rendering other pages and there is an audio in the header, it needs to be stopped if another audio or video is played on the site. How to dynamically stop audio in menu if video or audio is playing?

Answer 1

Subscribe to the playing event, for example. (or choose the one that suits you best)
something like this:

document.addEventListener('playing', stopBackgroundAudio)

Answer 2

Read about eventbus.
The idea is this: in one component, you subscribe to an event, conditionally, somthing-playingand stop the audio on this event.
And in all other components, when you start an audio or video, you call this event.