如何在fancybox上播放音频文件？

Question

我已经为我的画廊使用了 fancybox。 当我单击图库图像时，它会在灯箱中显示图像和标题，好吧。 但我的音频文件无法正常工作。 这是我的代码：

<a class="fancybox-thumbs" title="mytitle" data-fancybox-group="thumb"  href="4_b.jpg"
 audio-html="<audio autoplay='autoplay' controls='controls'><source src='https://archive.org/download/melody2007/bandaamorperfeito-aovivo-01-lovelouco.mp3'/></audio>"><img src="4_s.jpg" alt="" /></a>

JAVASCRIPT

$('.fancybox-thumbs').fancybox({
    prevEffect : 'none',
    nextEffect : 'none',

    closeBtn  : true,
    arrows    : true,
    nextClick : true,

    helpers : {
        thumbs : {
            width  : 100,
            height : 100
        },
        title : {
            type : 'inside'
        },
        buttons : {}
    },
    afterLoad : function() {
        this.title;
    }
});

Answer 1

您可以使用 Fancybox3 的 Iframe 选项：http: //fancyapps.com/fancybox/3/docs/#iframe

<a data-type="iframe" data-src="http://yoursite.com/mp3/file.mp3" href="javascript:;" rel="fancybox">LINK</a>

Answer 2

<img class="img-fluid" src="image.png" width="100%" height="100%" alt="">
 <div class="caption">
  <h4>
    <a data-fancybox="" data-caption="" href="#myAudio1">Audio Name</a> 
  </h4>
   <audio controls id="myAudio1" style="display:none;">
    <source src="audiosource.mp3" type="audio/mp3">
   </audio>
 </div>