单击锚点链接时淡入/淡出音乐
单击锚点链接时淡入/淡出音乐
提问于 2013-02-26 08:47:53
我有一个网页的几个链接，将淡入页面时，点击，而不是加载一个不同的.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" width="25" height="20"
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" width="25" height="20" 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
Stack Overflow用户
发布于 2013-02-26 08:58:42
如果你真的想播放背景音乐，我推荐一个基于javascript的音乐框架，叫做SoundManager。您可以更轻松地控制音乐的播放，以及支持更新的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);
}从本质上讲，你只需要在一定的时间间隔内将声音的音量减少/增加固定的量即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15079392
复制相关文章
相似问题
腾讯云开发者
