单击锚链接时淡入/淡出音乐
Posted
技术标签:
【中文标题】单击锚链接时淡入/淡出音乐【英文标题】：Fade in/out music on clicking anchor link 【发布时间】：2013-02-26 00:47:52 【问题描述】：我有一个带有多个链接的网页，当点击这些链接时，这些链接会淡入页面，而不是加载不同的 .html 文件。 这是我的代码：
<!--fade and show windows-->
<script type="text/javascript">
$(document).ready(function()
$('.aboutbutton').click(function()
displayNone();
showWindow("aboutpage");
);
....
....
function displayNone()
$('#homepage,#aboutpage,#blueprintpage,#budgetpage,#musicpage').fadeOut();
function showWindow(name)
$('#' + name).fadeIn();
);
</script>
...
...
<body>
<a href="#aboutpage" class="aboutbutton">About</a>
<a href="#blueprintpage" class="blueprintbutton">Blueprint</a>
...
...
<div id="aboutpage">
//CONTENT OF THIS PAGE//
</div>
<div id="blueprintpage">
//CONTENT OF THIS PAGE//
</div>
....
....
<!--simple pause/play music button at bottom of page using flash-->
<div class="backgroundmusic">
<span class="whitetext backgroundmusictext">Background music </span>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="../site/swf/singlemp3player.swf?file=../site/music/OST/wenqing.mp3&backColor=990000&frontColor=ddddff&repeatPlay=true&autoStart=true&songVolume=30" />
<param name="wmode" value="transparent" />
<embed wmode="transparent" src="../site/swf/singlemp3player.swf?file=../site/music/OST/wenqing.mp3&backColor=990000&frontColor=ddddff&repeatPlay=true&autoStart=true&songVolume=30"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
如您所见，每个页面都是通过锚链接访问的。我想为每个页面分配背景音乐。当点击任何链接（如“关于”“蓝图”等）时，我希望当前正在播放的任何音乐都淡出，然后新的音乐淡入。
这是一个个人音乐网站，所有的音乐都是我的作品，没有一个是破坏耳膜的主流东西，都是平静的钢琴旋律，所以请不要评论“有背景的想法很糟糕”音乐”等。
感谢您的帮助。
【问题讨论】：
很抱歉，但有背景音乐是一个糟糕的主意。如果我有音乐播放，背景音乐是我最不想听到的。 喜欢你在评论之前阅读了他最后的警告；） 那你的耳膜可能已经被主流垃圾毁了。那是你的问题。 【参考方案1】：如果您真的想播放背景音乐，我建议您使用一个名为 SoundManager 的基于 JavaScript 的音乐框架。您可以更轻松地控制音乐的播放，并为禁用 Flash 的人支持更新的 HTML5 播放。然后使用类似the GetSatisfaction page for the same issue上发布的代码：
function fadeInSound(soundID,amount)
var s = soundManager.getSoundById(soundID);
var vol = s.volume;
if (vol == 100) return false;
s.setVolume(Math.min(100,vol+amount));
setTimeout(function()fadeInSound(soundID,amount),20);
function fadeOutSound(soundID,amount)
var s = soundManager.getSoundById(soundID);
var vol = s.volume;
if (vol == 0) return false;
s.setVolume(Math.max(0,vol+amount));
setTimeout(function()fadeOutSound(soundID,amount),20);
本质上，您只是在一定的时间间隔内将声音的音量降低/增加一个固定的量。
【讨论】：
以上是关于单击锚链接时淡入/淡出音乐的主要内容，如果未能解决你的问题，请参考以下文章