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个隐藏的div，每个div都有相应的玩家和.mp3。相应的div在fancybox中加载（参见href中的值）。

同时查看此链接以查看实际操作代码：http://jsfiddle.net/hNLdk/祝您好运。

如何在点击或嵌入fancybox中更改音频

1 个答案: