Adding Audio to Your Website

If necessary, open the post or page you've been working on so you can edit it.

First, you need to locate appropriate audio for your website. You may search Creative Commons for audio media, but I suggest that you visit the Internet Archive. This website is extremely useful for teachers. Not only does it make free movies, music, and books available, but it also allows you to view cached versions of websites, even if the website has been shut down years ago, which is handy if you had a good resource online and found that the website owner decided to remove their site from the Web.

For the purposes of this demonstration, I am going to locate an audio version of a poem I teach in my English classes and embed it here.

"I Wandered Lonely as a Cloud."


Note: This poem is in the public domain. Audio on Internet Archive is all either in the public domain or has been licensed under Creative Commons.

As you can see, the audio is embedded in such a way that you are able to control play. It is important that you give your site visitors control over playing content like video and audio rather than embed it in such a way that the user cannot control it. If you have the option, it is always better to let your visitors press the button to play rather than set the audio to play automatically.

Important: Do not embed or upload audio to your website that is copyright restricted, such as songs from your iTunes library. The RIAA (Recording Industry Association of America) has aggressively pursued websites who upload songs to their websites in order to protect the earnings of the artists. Even if you believe use of the audio constitutes fair use, it would be a better idea to locate public domain or Creative Commons audio.

Obtaining Audio

Search for audio on Internet Archive:
  1. Click on the tab that says "Audio" on the top of the website.
  2. Use the search function near the top of the page to locate an appropriate audio file. Suggestions: search for your subject, such as "chemistry."
  3. Click on a search result that looks promising. You will see a page with an embedded audio player and links to audio files underneath.
  4. You have a couple of options. If you want to embed all of the audio, click on the link under the audio player that says Embed This.
  5. You will see some code that looks familiar to the embedding code for a YouTube video. Copy the code.
  6. If you don't want to embed all of the audio, right-click (Windows) or control-click (Mac) on the link to audio file you do want to embed. I would suggest that you select mp3, as it is format that most websites can embed easily. Note: If you have a blog, follow the directions for embedding the audio file as most blog services will not allow you to upload mp3's to your blog. You will learn how to embed your own mp3 to a blogger blog during the Creating Podcasts lesson.
  7. A popup menu will appear. Select "Save Link As" or "Save Target As."
  8. Save the file in a location where you can find it, such as an audio file.

audio1.jpg

audio2.jpg

audio3.jpg

audio4.jpg

Adding Audio to Wikispaces

Adding Audio with Embed Code

  1. If you used the entire player embedding code, make sure you have copied the code.
  2. Edit your wiki page.
  3. Click on "Widgets."
  4. Select "Audio."
  5. Select "Other."
  6. Paste the code in the space provided.
  7. Click "Save."
  8. You should see the audio player on your wiki when you save the wiki page.

Once you have added the audio and saved your wiki page, move on to adding a link to your website.

audio5.jpg

audio6.jpg

Adding and Embedding an MP3 File

If you saved only a single file, follow these directions.
  1. Edit your wiki page.
  2. Click on "File."
  3. Click on the button that says "Upload."
  4. Locate your mp3 file and upload it to the wiki.
  5. Just as you did with images, click on the audio file to add it to your wiki.
  6. Save your wiki page. You should see an audio file that looks like the one near the top of this page.

Once you have added the audio and saved your wiki page, move on to adding a link to your website.

audio7.jpg

Adding Audio to Blogger

  1. Edit your blog post.
  2. If you elected to embed the whole player, click the tab that says "Edit HTML."
  3. Paste the code into the editor.
  4. Switch back to "Compose" and you will see a player embedded in your post.
  5. Click "Preview" to see what your audio player will look like in your post.
  6. Save your post.

audio8.jpg

audio9.jpg

Note: If you have a blog, you probably will not be able to upload an mp3 file to your site. Many blog hosts do not allow this feature because so many users upload copyrighted files. If you really want to upload an mp3 file to your blog, wait until you have completed the Creating Podcasts lessons, where you will learn how to save and upload mp3 files to a blog.

Once you have added the audio and saved your post, move on to adding a link to your website.

Adding Audio to a Google Site

Adding Audio with Embed Code

  1. If you have chosen the embedded code, edit your page.
  2. Click on the button in the top menu that says "HTML."
  3. Paste the embed code in the editor.
  4. Save your site. The audio should appear.

Once you have added the audio and saved your website, move on to adding a link to your website.

Adding and Embedding an MP3

If you have a standalone website with your own domain, you will find adding audio files very easy because you are not restricted as to content. However, if you have a Google Site, you need to go through a couple of steps in order to add audio.
  1. Create a new page.
  2. Click the "File Cabinet" template.
  3. Name the page whatever you like.
  4. Click "Create Page."
  5. Click the "Add File" button.
  6. Browse for the mp3 on your computer.
  7. Click "Upload."
  8. You should see the file on the page.
  9. Right-click (Windows) or control-click (Mac) the link that says "Download."
  10. Select "Copy Link Location" or "Copy Shortcut."
  11. Go back to the page you have been working with and edit it.
  12. Click "Insert" in the menu along the top of the page.
  13. Select "More Gadgets" on the bottom.
  14. You want to add the "MP3 Player" gadget. If it doesn't appear when you open gadgets, search for "MP3 Player."
  15. Click "Select."
  16. When the new window appears where it says "Song URL," select the text and delete it. Paste the URL for the mp3 file you uploaded.
  17. Click "OK." You should see the gadget on your site. Save your page. The mp3 player should appear on your page.

audio10.jpg

audio11.jpg

audio12.jpg

audio13.jpg

audio14.jpg

audio15.jpg

audio16.jpg

audio17.jpg

Once you have added the audio and saved your website, move on to adding a link to your website.

Module 1 | Module 2 | Module 3 | Module 4 | Module 5