Magnific Popup Wordpress Audio Shortcode Keeps Playing after Close - wordpress

Question

I have created an inline popup for my custom Wordpress theme using Magnific Popup and the wp_audio_shortcode() function. It works beautifully, except that the audio keeps playing when I close the popup. (Embedded video stops exactly as expected, which is great!)
I read this post magnific-popup, how to play an audio file when popup open and stop playing when closing it and it didn't quite address my problem; I get several javascript errors.
Any help would be greatly appreciated!
Here is the HTML for the popup window that my function renders. I have removed extraneous things like web addresses and multi-line headlines.
THE LINK PEOPLE CLICK:
<span class="pop-up-wrapper"><h2 class="homecard-title">Link Text</h2></span>
THE POPUP THAT APPEARS:
<div id="popup-3" class="pop-up-post zoom-anim-dialog">
<div class="pop-up-left"><img src="graphic.jpg" class="pop-up-back-image"></div>
<div class="pop-up-right">
<h2 class="homecard-title">Headline Here<br><span class="play-wrapper" id="audio-3"><!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<audio class="audio-3" id="audio-104-1" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3?_=1">http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3</audio></span></h2>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
The jquery for Magnific (taken directly from the website):
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
});
When the close button is clicked, I would like the audio to STOP playing, but it continues in the background.

Answer 1

Well folks, I solved it. I abandoned the wp_audio_shortcode(), which made it easier to assign an ID to the <audio> element.
I am happy to provide all of the code, but I think it's confusing out-of-context. Here are the important tidbits…
The magnificPopup container gets a data-ref attribute that matches the audio player's ID contained within it. (I did this with a simple $count variable because there are several popups on the page.)
The important part for the magnificPopup jQuery is this:
callbacks: {
close: function(){
var magnificPopupVar = $.magnificPopup.instance,
magnificPopupSrc = magnificPopupVar.currItem.src,
magnificPopupRef = $(magnificPopupSrc).attr('data-ref'),
audioplayer = document.getElementById('audio-popup-'+magnificPopupRef);
audioplayer.pause();
}
}
In context:
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
modal:false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in',
callbacks: {
close: function(){
var magnificPopupVar = $.magnificPopup.instance,
magnificPopupSrc = magnificPopupVar.currItem.src,
magnificPopupRef = $(magnificPopupSrc).attr('data-ref'),
audioplayer = document.getElementById('audio-popup-'+magnificPopupRef);
audioplayer.pause();
}
}
});
I hope that's helpful to someone else trying to sort this out!