링크를 클릭 할 때 오디오 클립 재생

Question

나는 Soundcloud에서 호스팅되는 오디오 파일에 링크되는 링크가 있습니다. 링크를 클릭하면 새 웹 페이지가 열립니다. 오디오 플레이어/YouTube 비디오 (필요할 경우 사운드 클라우드에서 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이를 사용하여 대화 상자에 외국 페이지를로드하여 "듣기"링크를 클릭 이벤트를 수신 할 수있다. 당신은 iframe을 사용하는 것이 마음에 들지 않으면

How to display an IFRAME inside a jQuery UI dialog

Answer 2

은 또한 유튜브 길을 갈 수 있습니다. html5 및 플래시 플레이어는 YouTube 작품의 코드를 기본적으로 포함시킵니다. 링크의 클릭 이벤트를 듣습니다 (초보자에게도 사용하기 쉽기 때문에 JQuery를 제안합니다). 대화 상자에 소스 코드를 넣고 엽니 다. 플레이어를 닫을 때 멈추게하려면 대화 상자 안의 닫기 버튼을 듣고 대화 상자를 비우면됩니다. 이렇게하면 삽입 된 플레이어가 멈춰야합니다.