javascript - 单击链接播放音频剪辑

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 的对话框可以使页面在您的内部加载的简单方法。

http://jqueryui.com/dialog/

您可以监听“监听”链接上的点击事件以打开一个对话框并使用 iframe 将外部页面加载到您的对话框中。

How to display an IFRAME inside a jQuery UI dialog