如何更改點擊音頻或嵌入花式框

Question

我試圖將音頻包含在fancybox中，以便當您單擊圖像時彈出音頻也會播放。但是，我不想下載外部音頻播放器，而是使用當前包含在網頁上的音頻播放器。基本上我只是想通過加載另一個MP3來改變當前正在播放的音頻。

下面是音頻播放器的代碼是在網頁上：

<div id="audioPlayerContainer" title="Audio Player"> 

<object type="application/x-shockwave-flash" data="../flash/player_mp3_maxi.swf" width="140" height="20"> 
<param name="wmode" value="transparent"> 
<param name="movie" value="../flash/player_mp3_maxi.swf"> 
<param name="FlashVars" value="configxml=../flash/config.xml&amp;mp3=../audio/intro/intro_08_background_07.mp3"> 
<p>Flash Audio Player</p> 
</object> 

</div> 

我將如何能夠改變一次下面的鏈接被點擊時播放的聲音？

 <li style="float:left"><a href="../images/intro_characters_Raj.png" title="Raj Sharma" width="500"><img alt="Raj Sharma" src="../images/intro_characters_Raj.png" /></a></li> 

此鏈接有連接到它的fancybox腳本如下所示：

<script type="text/javascript"> 

    $(document).ready(function(){ 

     $("#clientPic li a").fancybox(); 
    }); 
</script> 

Answer 1

這是基於您的代碼段，請檢查是否這將滿足您的需求的工作示例。

HTML：

<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js?v=2.0.6"></script> 
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" /> 

<ul style="text-align: center; margin-top: 20px;"> 
    <li><a class="fancybox" href="#inline1" title="Now Playing: Sample 1">Launch Sample 1</a></li> 
    <li><a class="fancybox" href="#inline2" title="Now Playing: Sample 2">Launch Sample 2</a></li> 
    <li><a class="fancybox" href="#inline3" title="Now Playing: Sample 3">Launch Sample 3</a></li> 
</ul> 

<div id="inline1" style="width: auto; display: none;" > 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20> 
    <param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" /> 
    <param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" /> 
    <param name="quality" value="best" /> 
    <embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
    <p>Sample 1</p> 
    </object> 
</div> 

<div id="inline2" style="width: auto; display: none;" > 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20> 
    <param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" /> 
    <param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" /> 
    <param name="quality" value="best" /> 
    <embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
    </object> 
    <p>Sample 2</p> 
</div> 

<div id="inline3" style="width: auto; display: none;" > 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20> 
    <param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" /> 
    <param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" /> 
    <param name="quality" value="best" /> 
    <embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
    <p>Sample 3</p> 
    </object> 
</div> 

JS：

$(document).ready(function() { 
    $('.fancybox').fancybox(); 
}); 

所以基本上有3個隱藏層，每個與相應的播放器和MP3播放。相應的div加載到fancybox中（請參閱href中的值）。

請檢查此鏈接以查看代碼實際運行情況：http://jsfiddle.net/hNLdk/祝您好運。