Magnific Popup Wordpress Audio Shortcode продолжает играть после закрытия - PullRequest
Новая
       25

Magnific Popup Wordpress Audio Shortcode продолжает играть после закрытия

0 голосов
/ 18 апреля 2019

Я создал встроенное всплывающее окно для своей пользовательской темы Wordpress, используя Magnific Popup и функцию wp_audio_shortcode (). Это работает прекрасно, за исключением того, что звук продолжает воспроизводиться, когда я закрываю всплывающее окно. (Встроенное видео останавливается точно так, как ожидалось, и это здорово!)

Я прочитал этот пост magnific-popup, как воспроизвести аудиофайл при открытии всплывающего окна и остановить воспроизведение при его закрытии , и это не совсем решило мою проблему; Я получаю несколько ошибок 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>

Jquery для Magnific (взят прямо с сайта): 

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

        });

Когда нажимается кнопка закрытия, я хочу, чтобы звук проигрывался, но он продолжается в фоновом режиме.

1 Ответ

0 голосов
/ 26 апреля 2019

Ну, ребята, я решил это.Я отказался от wp_audio_shortcode(), что упростило присвоение идентификатора элементу <audio>.

Я рад предоставить весь код, но я думаю, что он сбивает с толку вне контекста.Вот важные лакомые кусочки ...

Контейнер magnificPopup получает атрибут data-ref, который соответствует идентификатору аудиоплеера, содержащемуся в нем.(Я сделал это с простой переменной $count, потому что на странице есть несколько всплывающих окон.)

Важная часть для jQuery magnificPopup: 

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

Надеюсь, это поможет кому-то другому, пытающемуся разобраться в этом!

...