关闭后华丽的弹出式 Wordpress 音频简码继续播放答案

【问题标题】：Magnific Popup Wordpress Audio Shortcode Keeps Playing after Close关闭后华丽的弹出式 Wordpress 音频简码继续播放
【发布时间】：2019-04-18 19:45:30
【问题描述】：

我使用 Magnific Popup 和 wp_audio_shortcode() 函数为我的自定义 Wordpress 主题创建了一个内联弹出窗口。它工作得很好，除了当我关闭弹出窗口时音频继续播放。（嵌入视频完全按预期停止，这很棒！）

我阅读了这篇 magnific-popup, how to play an audio file when popup open and stop playing when closing it 的帖子，但它并没有完全解决我的问题；我收到几个 javascript 错误。

任何帮助将不胜感激！

这是我的函数呈现的弹出窗口的 HTML。我已删除无关的内容，例如网址和多行标题。

链接人们点击：

<a href="#popup-3" data-audio="audio-3" data-effect="popup-with-zoom-anim" class="open-popup-link popup-with-zoom-anim has_thumb" style="background-image:url('graphic.jpg') "><span class="pop-up-wrapper"><h2 class="homecard-title">Link Text</h2></span></a>

出现的弹出窗口：

<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"><a href="http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3">http://vivenne:8888/wp-content/uploads/2019/04/Vivienne-Leheny-Hot-Winter-NIghts-Lucas-Mom.mp3</a></audio></span></h2>
     </div>

     <button title="Close (Esc)" type="button" class="mfp-close">×</button>

</div>

Magnific 的 jquery（直接取自网站）：

        $('.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',

        });

当点击关闭按钮时，我希望音频停止播放，但它会在后台继续播放。

【问题讨论】：

标签： wordpress html5-audio magnific-popup

【解决方案1】：

各位，我解决了。我放弃了wp_audio_shortcode()，这样可以更轻松地为<audio> 元素分配ID。

我很乐意提供所有代码，但我认为这在上下文之外会造成混淆。以下是重要的花絮……

magnificPopup 容器获得一个data-ref 属性，该属性与其中包含的音频播放器的 ID 相匹配。（我用一个简单的$count 变量做到了这一点，因为页面上有几个弹出窗口。）

magnificPopup jQuery 的重要部分是：

callbacks: {
   close: function(){
      var magnificPopupVar = $.magnificPopup.instance,
      magnificPopupSrc = magnificPopupVar.currItem.src,
      magnificPopupRef = $(magnificPopupSrc).attr('data-ref'),
      audioplayer = document.getElementById('audio-popup-'+magnificPopupRef);
      audioplayer.pause();
   }
}

在上下文中：

$('.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();
      }
   }
});

我希望这对试图解决这个问题的其他人有所帮助！

【讨论】：