Javascript 单击链接即可播放音频剪辑

我有一个链接，链接到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>

---

提前感谢。

有很多方法可以实现这一点。 使用jQueryUI的对话框可以轻松地在您的页面中加载页面

您可以在listen链接上侦听click事件，以打开一个对话框，并使用iframe将外部页面加载到对话框中

---

如果你不喜欢使用iFrame，你也可以选择youtube。 html5和flash播放器嵌入了来自youtube的代码，这是开箱即用的。 听一下链接上的点击事件，我建议使用JQuery，因为它也很容易为初学者使用，请将嵌入代码放入对话框并打开它。

---

要在关闭时停止播放机，您可以在对话框中听到关闭按钮，然后清空对话框。这应该会阻止嵌入的播放器。

我真的不知道从哪里开始编码。你能帮忙吗？你是在做一般的事，我可以帮你做具体的编码。在较小的和平中解决你的问题，并开始实施它们。如果你卡住了，问一个具体的问题。如果您想采用我的第一种方法，请从以下步骤开始：1。如果需要的话，可以查看如何让JQuery在你的页面上工作，使用google，这里有很多描述。2.查看如何让jQueryUI工作，这是jQuery3的附加插件。在页面上放置一个包含helloworld的div元素，并尝试在对话框中打开它。如果一切正常，那么从这里到目标只需要一小步。您不希望在文档加载时执行该代码，而是希望在单击时执行它。这可以通过jquery单击事件完成。将此事件添加到链接中，并在该事件函数内执行对话框代码。

.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;
}