magnific-popup，如何在打开弹出窗口时播放音频文件，并在关闭它时停止播放

问题描述

我正在使用放大弹出窗口来显示图片...打开弹出窗口时是否可以开始播放au音频文件，关闭窗口时可以停止播放?

I am using magnific-popup to display pictures ...Is it possible to start playing au audio file when the popup window open and stop it when closing the window ?

<a href="images/capoeira.jpg" class="fh5co-project-item image-popup to-animate">
    <img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive">
    <div class="fh5co-text">
        <h1>ANIMA'SON</h1>
        <span>Participants: minimum 10, maximum: 20</span>
    </div>
</a>

推荐答案

我通过在每个图片弹出链接中添加音频标签来解决了该问题

I solved it by adding an audio tag within each image-popup link

<a href="images/capoeira.jpg" data-sound="berimbau" class="fh5co-project-item image-popup to-animate">
    <img src="images/berimbau.jpg"  alt="Animason groupes" class="img-responsive">
    <div class="fh5co-text">
        <h1>ANIMA'SON</h1>
        <h2>60€ / heure / groupe</h2>
        <span>Participants: minimum 10, maximum: 20</span>
    </div>
    <audio  id="berimbau-audio" loop="loop" preload="none">
        <source src="./sounds/berimbau.ogg" type="audio/ogg">
        <source src="./sounds/berimbau.mp3" type="audio/mpeg">
    </audio>
</a>

并使用data-sound参数和audio.id将回调添加到magnific-popup-options.js中

and adding callbacks into he magnific-popup-options.js, using the data-sound parameter and audio.id

$(document).ready(function() {
    var soundName;
    var audioElement;

    // MagnificPopup
    $('.image-popup').magnificPopup({
        ....
        callbacks: {
            elementParse: function(item) {
                soundName = item.el[0].attributes['data-sound'].value;
                audioElement= document.getElementById(soundName + "-audio")
                audioElement.load();
            },
            close: function() {
                audioElement.pause();
            },
            change: function() {
                audioElement.play();
            }
        },
    });
});

这篇关于magnific-popup，如何在打开弹出窗口时播放音频文件，并在关闭它时停止播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！