The Steps
Most web browsers support a variety of sound files. We are going to create and post an MP3 file.
1. Open Garageband.
2. Choose Magic Garageband (if you are familiar with Garageband or already have created Garageband songs, you may use those instead).
3. Create a song (choosing the genre and then instruments for your song) and show it in Garageband (this is done using the Audition button in some versions of Garageband).
4. Save your song.
5. Export your song using Share -> Export to Disk, and compress using the MP3 encoder, saving into your folder on the web server.
Now it's time to add your song to a web page.
6.Create a new Dreamweaver document called media.html. (Don't forget to also give it a title.) We can add audio to our website in two ways.
Way One:
- To put the music on the page, go to Insert -> Media -> Plugin.
- Choose your audio file.
- Using the Properties box, give the media a width and a height (at least 20px so viewers of your page have a control bar).
- Also using the Properties box, click on the Parameters button and add 'autoplay' as a parameter and 'false' as its value. (This will keep the music from playing until your viewers press the play button.)
Way Two:
- Type "Listen to my music."
- Select the text and create a link to your .mp3 file (just as you would another page).
LISTEN TO MY MUSIC (this is a link)
Below is an example of a song inserted as a plugin.
And now... Video.
7. Save a small movie clip or Quicktime video clip to your web folder, then add it to your media.html web page (hint: using Photobooth is a quick, easy way to make your Quicktime video). You can add video in the same way as you add audio. Try both ways (plugin and link).
Or, if I didn't want this video to take up space on this page, I could provide a link to the file LIKE THIS.
If this video doesn't play for you, you may need to download the Quicktime player.
The Assignment
1. Create media.html, so that:
- media.html contains at least one link (that opens in new browser window) to an .mp3 file you have created
- media.html contains at least on sound file embedded on page, with controls for viewer to play sound file (sound should be set on autoplay=false so that it doesn't not start automatically)
- media.html contains at least one video, created by you, embedded on page
- media.html contains a link to at least one video created by you
- if applicable, media.html contains citations for all work that is not your original work
Useful links to learn about Garageband '08: