Ross Sheppard High School
Computer Programming 10
Student Learning Guide
Adding Sound to Your Home Page


  When you have finished this project, you will be able to:
add sound to your Web page
download and use sound files
use a media player program

describe the following terms:

  • wave file
  • midi file

  1. Create a new folder called Sound. Save all files associated with this project in this folder. Just as graphic files needed to be saved in the same folder as the html file, sound files need to be in the same folder as the page you are now going to create.

  2. Start a web page as you usually would. Save the file.

  3. The easiest method of using a sound file is to download it from the Internet. Do a search for MIDI FILES. Download four files.

  4. You must use public domain files - files for which you have permission to use on your web page.

  5. To have the music play automatically in the background when the web page is loaded, add these two lines of code immediately below the <HTML> tag:



  6. Change the name of the midi file in the tag to the name of the midi file you downloaded.

  7. When you post a web page to the World Wide Web, you don't know which type of browser the user will be using. The first line of code above is for Microsoft Interent Explorer, the second line is for Netscape Navigator. As a courtesy to all users, be sure to include both lines of code.

  8. Save your page and try it. The midi file should play when the page loads.

  9. Next, you will create tags that cause the Windows Media Player to open so the user can control when the file starts to play.

  10. Add the following code to your web page where you want the media player to appear.



  11. Be sure to substitute the generic information in the illustration above with the proper information for your MIDI file.

  12. Repeat this for the other two files - for a total of four sound files associated with your page.

  13. The next step will be to add a sound file that you have created.

  14. Log in to a computer that has a microphone attached.

  15. Use the Windows Sound Recorder Program to record a sound with the microphone.

  16. Start the Windows Sound Recorder program by double clicking the icon on your desktop.



  17. The controls on the Sound Recorder are shown in the illustration below:



  18. Prepare a short greeting for your web page by writing it down on a piece of paper. You will read this into the microphone.

  19. To record your voice, click on the Record button.

  20. Speak slowly and clearly into the microphone and record your greeting.

  21. When finished, click the Stop button.

  22. Press the Play button to hear your recording. At this point you can re-record the greeting if you are not happy with it.

  23. If you are satisfied with the recording, click File on the Menu bar, then select Save.



  24. Save the audio file to your sound folder. Call the file Greeting.wav

  25. Next, return to your sound web page to continue editing it.

  26. Add the following code to your web page to play your greeting sound file:

  27. As part of the link, add an image source for a picture of you. Change the text of the link to read "click on me to hear my greeting".

  28. Next, you will add an audio file that has been created using a Text-to-speech (TTS) program. In this case, you will type a greeting, and it will be converted into a synthesized voice that you can play on your Web page.

  29. Next you will use a Text-to-speech (TTS) synthesizer to create an audio file.
    Click here to hear an example of a TTS audio file.
    Click here to hear another example of a TTS audio file.

  30. Go to the either Amercan Telephone and Telegraph ( AT&T) or Bell Labs / Lucent Technologies Text to Speech Project Web Site and create a TTS file. Note that after you have created the file, you can save it from the Media player by clicking File in the Menu Bar, then "Save As" and put it in your project folder.

  31. Save the file as a wave (WAV) file.

  32. Create a link on your Web page that will play the TTS File. You must give credit to Lucent Technologies,or AT&T as well as providing a link to their Web sites.

  33. Test and revise the page as necessary.

  34. Click here to see the marking guide for this project.

  35. Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded..


© 1998-2000 N.F. Mathew, EdD
File name: sound.htm
Last updated J. Heslinga September 17, 2003