Click the logo to add
this site to your Favourites
Search:
Quick Links
Subscribe to my Newsletter
Books presented in association with:
Your Free E-Mail
Account:
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
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).
<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>
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.
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.
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.