Question

我有一个链接到Soundcloud上托管的音频文件。单击该链接将打开一个新网页。是否有可能有一个音频播放器/ youtube视频（如果需要，我可以轻松地从soundcloud转移到Youtube）并让播放器在页面内打开 - 就像灯箱效果一样？

HTML是：

<div class="audiodemo">
<div class="audiodemoheader"> “Welcome to the Recovery Show, who's on board?”        </div>
<div class="audiodemolink"><a href="https://soundcloud.com/iamdanmorris/dan- morris-radio-demo" class="demolink">Listen</a></div>
</div>

CSS是：

.audiodemo {
width: 100%;
height: 300px;
float: left;
background-image:url(images/audio_demo_background.jpg);
}

.audiodemoheader {
width:100%;
height:auto;
text-align:center;
float:left;
margin-top:94.5px;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 30px;
font-weight: 200;
color: #FFF;
}

.audiodemolink {
width:100%;
height:auto;
text-align:center;
float:left;
margin-top:40px;

}


.audiodemolink .demolink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 3px solid #fff;
-webkit-transition: .2s;
transition: .2s;
color:#FFF;
text-decoration:none;
margin-left:auto;
margin-right:auto;
}

.audiodemolink .demolink:hover {
opacity: 0.7;
}

提前致谢。

Answer 1

有很多方法可以实现这一点。在您的页面内部加载页面的简单方法可能是使用JQuery UI的Dialog。

http://jqueryui.com/dialog/

您可以在“收听”链接上收听点击事件，打开一个对话框，然后使用iframe将外国页面加载到对话框中。

How to display an IFRAME inside a jQuery UI dialog

Answer 2

如果你不喜欢使用iframe，你也可以采用youtube方式。 html5和flash播放器从youtube嵌入代码开箱即用。聆听链接上的click事件（我建议使用JQuery，因为它也很容易用于初学者），将嵌入代码放在对话框中并打开它。要关闭播放器，您可以在对话框内收听关闭按钮并清空对话框。这应该会阻止嵌入式播放器。

单击链接播放音频剪辑

2 个答案: