How to implement a "listener" in javascript for screen viewing?

I need to implement a change in my code so that when I change DIV, that is, I stop seeing the page, the sound that is running stops automatically, as is already the case with Facebook/Instagram videos on web platforms. I made the following code:

<audio id="myAudio" src="../media_a/song3.mp3" preload="auto">
</audio>

<script type="text/javascript" charset="utf-8" async defer>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
if (isPlaying) {
myAudio.pause()
} else {
myAudio.play();
}
}; 
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
myAudio.currentTime = 0;
isPlaying = false;
};
</script>  

The ON / OFF button is 100% functional, but when I call another DIV in a single-page system, the audio should stop playing, but it continues. Since each DIV has a different audiodescription, how do you implement a listener so that when you stop visualizing that DIV the sound stops automatically?