0

我正在尝试将音频包含在一个花式框中，这样当您单击图像时，它也会播放弹出的音频。但是，我不想下载外部音频播放器，而是使用网页上当前包含的播放器。基本上我只是想通过加载另一个 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>
4

1 回答 1

0

这是一个基于您的代码片段的工作示例，请检查这是否适合您的需求。

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，每个都有对应的播放器和.mp3。相应的 div 被加载到 fancybox 中（参见 href 中的值）。​</p>

检查此链接以查看实际代码：http: //jsfiddle.net/hNLdk/祝你好运。

于 2012-06-18T16:30:47.990 回答