Постепенное появление/исчезновение музыки при нажатии на якорную ссылку

У меня есть веб-страница с несколькими ссылками, которые исчезают при нажатии на страницы вместо загрузки другого файла .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>

Как видите, доступ к каждой странице осуществляется через якорную ссылку. Я хочу назначить фоновую музыку для каждой страницы. Когда нажимается любая ссылка (например, «о», «план» и т.

Это личный музыкальный веб-сайт, и вся музыка — это мои работы, и ни одна из них не является мейнстримом, разрушающим барабанные перепонки, все это спокойные фортепианные мелодии, поэтому, пожалуйста, не комментируйте «ужасную идею иметь фоновую музыку» и т. д. и т.п.

Спасибо за вашу помощь.


audio jquery anchor fade
person Windbrand    schedule 26.02.2013    source источник
comment
Сожалею, но это ужасная идея — иметь фоновую музыку. Если у меня играет музыка, фоновая музыка — это последнее, что я хочу слышать.   -  person Dom    schedule 26.02.2013
comment
Мне нравится тот факт, что вы прочитали его предостережение в конце, прежде чем комментировать;)   -  person BenM    schedule 26.02.2013
comment
Тогда, возможно, ваши барабанные перепонки уже были разрушены обычным мусором. Это твоя проблема.   -  person Windbrand    schedule 26.02.2013

Ответы (1)


arrow_upward
2
arrow_downward

Если вы действительно хотите, чтобы фоновая музыка играла, я бы предложил музыкальную среду на основе javascript под названием SoundManager. Вы можете гораздо проще управлять воспроизведением музыки, а также поддерживать более новое воспроизведение HTML5 для людей с отключенной вспышкой. Затем используйте что-то вроде кода, опубликованного на странице GetSatisfaction для той же проблемы:

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);
}

По сути, вы просто уменьшаете/увеличиваете громкость звука на фиксированную величину в течение определенного интервала.

person Andrew FigPope    schedule 26.02.2013