Fade in/out music on clicking a link

Fade in/out music on clicking a link

Hello everyone,
My webpage uses javascript to fade in/out pages, so everything is in one html file (yes I know it's not as SEO-effective but I just like this style and it has no loading time, and it's not a commercial website anyways). On some pages I have background music, I'm trying to have any music playing currently to fade out when I click a link to another page then have the music assigned to that page fade in. Since it's all in one html file the music won't stop automatically as all the page links are just anchor links to a div.
This is the format of my code:

  1. <!--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/xianjian.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>
















































That is the format of my code. As you can see there are a few pages like "aboutpage" "blueprintpage" etc. What I'm trying to do is assign a background music to each page. If I'm currently on "aboutpage" and "aboutpagemusic.mp3" is playing, and I click the link to "blueprintpage", I'd like all music to fade out, then "blueprintmusic.mp3" to fade in. Some kind of javascript function to "fade all currently playing music", then once it's done fading out fade in another track, and hook this to some anchor link class/ID.
I know I'm gonna get some comments regarding "oh don't put background music that auto-plays". Well firstly it's a personal music website, secondly they're all my compositions, and thirdly none of them are the eardrum-blasting mainstream stuff. So it's not a problem.

I'd appreciate any help on this, thanks.