logo

Click the logo to add
this site to your Favourites


Search:

This Site The Web


Quick Links

  


Subscribe to my Newsletter


Books presented in association with:

Chapters.ca


Your Free E-Mail
Account:


   


Send me mail!

Send Me Mail


 

 


Changing Music


 
Introduction
The Script
How it works
The "meat" of the script
Inserting the Sounds
How to use it


Compatibility:
The script detailed on this page works only in Outlook Express 4


Introduction:

A popular effect in stationery is that of having the music in a message change when a certain button is pressed.  The script on this page will show you how to insert two diferent sound into your stationery and switch between them by clicking a button.

 

First some music:

 

 

Don't like this song? Click the button to change it.  Click again to switch back (note: for some reason this seems to work best if you click on the shadow portion of the image).


The Script:

<html>
<
head>
<
title></title>
<
/head>

<body>
<
img id="Original" src="image.file" style="POSITION: absolute; VISIBILITY: hidden; Z-INDEX: -1">
<
img id="Other" src="image.file" style="POSITION: absolute; VISIBILITY: hidden; Z-INDEX: -1">

<script language="VBScript">
Sub Window_OnLoad()
    Original.style.visibility="visible"
End Sub 

Sub Original_OnClick()
    Other.style.visibility="visible"
    Original.style.visibility="hidden"
    song.src=midi2.src
End Sub 

Sub Other_OnClick()
    Original.style.visibility="visible"
    Other.style.visibility="hidden"
    song.src=midi.src
End Sub 

</script>

<img height="1" id="midi" src="c:\temp\Greensl.mid" style="DISPLAY: none" width="1">
<
img height="1" id="midi2" src="c:\temp\SweetD~1.mid" style="DISPLAY: none" width="1">

<script language="JavaScript">
function PlayMusic(Title,loop) {
    document.writeln ('<BGSOUND id=song src="'+Title+'" loop='+loop+'>');
}
PlayMusic(midi.src,1)
<
/script>
<
/body>
<
/html>

 

How it works:

This script actually does more than I'm using it for here.  I've stripped it down a bit. Originally it would cause the graphic to change and the music to change when the mouse was passed over the graphic.  In playing around with it, I've found it to be quite a versatile script.  I haven't tried out every combination possible with it yet, but it'll do quite a lot in the graphic and sound switching department.

When the script first loads, it preloads two different graphics.

<img id="Original" src="image.file" style="POSITION: absolute; VISIBILITY: hidden; Z-INDEX: -1">
<
img id="Other" src="image.file" style="POSITION: absolute; VISIBILITY: hidden; Z-INDEX: -1">

One is named Original the other is named Other.  You can change the graphic names if you wish, just make sure you get every instance of the names.  To use your own graphic, just enter the path and filename into the src="" section above.

Note: for ease, I'm loading the same graphic twice.  If you use two different ones, then the graphic will change on the trigger event.  You can alter the position of the graphic if you wish.  Just make sure that you use the same position for both graphics or they'll move on the event.  Also I believe that the Absolute attribute is vitally important in ensuring that the second graphic displays directly over top of the original when called.

I left the second graphic in to retain the script's versatility.  If you want you could probably remove the "other" graphic to make the script a bit leaner, just make sure that in the rest of the script you change all references from "other" to "Original".

At start up, neither image is displayed.

Sub Window_OnLoad()
    Original.style.visibility="visible"
End Sub
 

This section of code causes the "Original" graphic to display.

 

Now the meat of the script:

Sub Original_OnClick()
    Other.style.visibility="visible"
    Original.style.visibility="hidden"
    song.src=midi2.src
End Sub
 

Sub Other_OnClick()
    Original.style.visibility="visible"
    Other.style.visibility="hidden"
    song.src=midi.src
End Sub
  

This section of code merely tells the program to change the graphic and/or the sound on the trigger event,  It is quite elegant in it's simplicity.  Note:  If you wish to have this work onmouseover, merely change both OnCick()'s above to OnMouseOver().

 

Inserting the Sounds:

<img height="1" id="midi" src="c:\temp\Greensl.mid" style="DISPLAY: none" width="1">
<
img height="1" id="midi2" src="c:\temp\SweetD~1.mid" style="DISPLAY: none" width="1">

This section of code calls in two different sound files.  Named midi and midi2 respectively.  You can use any sound you like.  To use a wav simply change the path and filename in the src="" attribute.

The first sound - midi will play when the message is opened.  If you wish to only have sound after the trigger event you can either change midi to src=" " or you could load an empty midi file. 

 

The next section of code:

<script language="JavaScript">
function PlayMusic(Title,loop) {
    document.writeln ('<BGSOUND id=song src="'+Title+'" loop='+loop+'>');
}
PlayMusic(midi.src,1)
</script>

This is what actually causes the music to play.  It is the typical JavaScript background sound embedding script.  To alter the number of times that the sound(s) play, change the number in the PlayMusic(midi.src,1) line.  A value of 1 plays each sound once, 2 will do it twice and so on.  A value of -1 will loop the sounds infinitely.

 

How to use it:

Copy the script sample above.  Open NotePad or your HTML editor and paste it in.  Make any changes necessary to reflect graphics and sounds that you actually have, then save.  Make sure you save it as a htm file.

Start creating your e-mail or post,  when you want to insert the script, go to Insert | Text from file, navigate to your new script file and hit okay.   Also, be aware that you will not hear any sound in the compose window.  The post must be saved to the drafts folder or the outbox before any sound will be heard.   The graphics may also look different when in the compose window.

A note on altering the script.  If you have FP98 or another editor with a preview mode, then I advise using that to alter this script because that allows you to preview your changes right there.  It is a quick and easy way to ensure that your changes are functioning the way you expect and it is far easier than saving and testing in Outlook Express.

 

Disclaimer:

This script is based upon one written by Gerard Ferrandez.  All changes and explanations are my own and I take full responsibility for any errors or omissions.

 

Home | FAQ | Download | TroubleShooter | Discussion | PSP | MIC | WET Retrospect | Feedback

 

1998, 1999 sven All content designed and written by sven, except where noted.

Disclaimer:  I am not affiliated in any way, shape or form with Microsoft Corporation.  All opinions expressed on this web site are mine alone and may not represent those of the majority of Outlook Express users.  All brand and product names are trademarks or registered trademarks of their respective owners.  No animals were harmed in the creation of this website.  All characters and situations portrayed on this website are completely fictional.  Any resemblance to actual persons or events is purely coincidental.  Your mileage may vary.  Past performance is not a reliable indicator of future gain. No purchase necessary.