Manager Help‎ > ‎Sites‎ > ‎

Audio

Overview

This page provides instructions on how to integrate MP3 audio files into Google Site pages.

The method described by this page is NOT compatible with all browsers.  We hope to identify and document another method that have better compatibility.  If you have a solution, please let us know.

ORG-specific

The organization (ORG) has deployed this service in the following specific manner to address our requirements.
TBD

Embed Audio into a Site

If you have audio files (perhaps .mp3s) such as songs and lectures that you want to share via a Google Site, you can, but it's a bit tricky.  This section shows you how you can use Google Sites so:
  • Embed an audio player to play the audio file into the page.
  • Provide your audience with a method for downloading the audio files.
There are two steps to the process:
  1. Putting the audio files up on the internet (there are several options)
  2. Providing a web page interface for playing the files and/or downloading files Google Sites doesn't offer nicely 'prepackaged tools' but we have a method.

Requirements

The audio player used in these instructions requires that the browser viewing the site has the following:
  • This implementation was tested to work on a Mac using Safari and Firefox browsers, but not with Chrome (I don't know why).(at the moment I'n not running the latest Flash Player - I'll try upgrading and check back..... Browsers will have to have plug-ins for__________(SR Safari and Firefox can use, but Chrome cannot)
  • TBD

Putting Audio Files on the Internet

There are a couple ways to host/share files using Google Apps, and they behave differently:
  • Drive - You can place any type of files in a Google Drive folder, including audio files. You can direct your audience to the drive folder to download the files.  However there is NOT a simple tool for embedding a song in music player into a Site page (the way we can easily do 'Insert-Slideshow' for photos).  But we have documented a method to embed an audio player and play Drive files.
  • Google Sites Attachments - Google Sites allows you to attach files to a web page.  Attachments usually appear at the bottom of the page where they've been uploaded, and your audience can optionally download the files there.  Again, unfortunately there isn't a simple tool for embedding a music player, however we have documented a method (below).
  • Other Internet Location - you can link to the files if they are present on another site on the internet. (useful for playback, but not if you want your audience to download the files too).
My current recommendation is to use Google Sites Attachments, since this automatically builds the 'downloads' portion of the page for you, and using the player gadget is a little easier.

Setup Files using Google Site Attachments:
Here's how to set this up:
  1. You must be signed on to an account with Edit permissions for the Google Site.
  2. Select a Google Site page to place the files.
  3. Enable 'Attachments' for that page (or verify that the feature is enabled). Go to 'More -> Page settings' on the dialog box, 'Allow attachments' must be 'checked', click save.
  4. Back on the page, scroll to the bottom to find the Attachments section (a folder icon).  Click on the 'Add files' link, and use the ensuing dialog box to select one or more files to upload to the site. When the upload completes you should see a list of files complete with download link and delete buttons.
    • Note the files do not have to be uploaded onto the same page where the audio player is embedded.
  5. That's all if you only want to provide your audience downloads, but continue if you want to use audio player, continue...
  6. Repeat for each file... Copy the file's URL onto the clipboard. Do this by right-clicking on the 'download' link for the file and selecting 'Copy Link'
  7. Proceed to next section (adding the ULR into the media player gadget).
Notes:
  • If you prefer, files can be attachments to a different page in the Site, perhaps a page setup using 'File Cabinet' format, or just a page you call 'resources'.
  • Provide an Audio Player, but NOT a downloadable file list. If you only want the files to be playable by your audience (and not downloadable), there are a couple options.  
  1. Make files hidden attachments:  Start by uploading the files as 'Attachments' to the page, and record all the URLs to use in the player setup (or better yet, finish the entire page setup and test that the audio player gadgets are all working properly.  Then return to page settings'More -> Page settings' to uncheck the 'Allow Attachments' setting - this will make the attachment list disappear, however the files remain in the site (hidden, not deleted).
  2. Upload the files to another page, and don't tell your audience where the files are.

Setup Files using Drive:

  1. First upload the desired files (.mp3, or perhaps others) into a Drive folder.
  2. Adjust the sharing permissions on the files so your desired audience will be able to access the files.
  3. Repeat the following steps for each file -- It's the tricky part:
  4. From the Drive Sharing dialog box, copy the 'Link to Share' URL (Example: TBD)
    • Unfortunately the link Google give you will take you to a Google Docs page to view the file (which for an MP3 you can't, so there's just a download button), this is NOT what we want (it won't work in the media player).
  5. Rather, you must make adjustments to the URL
    • Look for the word 'open' just after the google.com.  This word must be changed to 'uc'
    • Since the Drive link doesn't have a .mp3 file extension we need to add that to tell a media player that it is using an /mp3 file.  To the end of the URL add the string: '&type=.mp3'  (Final Example: TBD)
  6. Proceed to the next section.

Setup Files using Other Internet Location:
The MP3 file is anywhere else on the internet.  Just make sure you're audience will have access to the location where the file is stored.  

  • For each file get a copy of its URL.

Adding an Audio Player onto a Google Site page

For each song/audio clip that you want to embed into the page, follow these these steps using the file's (modified) URL.  Here are the steps:
  • Go to the Google Site page and enter 'Edit' mode and move to where you want the Audio Player.
  • Do either:
    • A) Insert -> More gadgets,and search for Google Audio Player, and input into the gadget the following code, or
    • B) Click on <HTML> to enter HTML editing mode, and again find the place where you want to the Audio Player, next enter this code:
  • Starting with the code in the shaded box, replace the URL shown in red with the URL for your audio file (as prepared above), and enter it into either (A) or (B).
<embed src="http://www.google.com/reader/ui/3523697345-audio-player.swf" flashvars="audioUrl=http://www.example.com/song.mp3" width="400" height="27" quality="best" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  • To complete this step (A) click 'Save', or (B) click 'Update' to exit HTML mode and then 'Save' the page.  Note when you complete (B) Google Sites wraps the code you inserted with Google Gadget code so it will look different the next time you open the HTML code view.
  • You should see an audio player on the page.  Click Play to test it out
  • Repeat for each of the other audio files.

Here's a completed example - using a file attached at the bottom of this page:
Jazz Clip:

And here's an example - using a file stored in a Drive folder:
Jazz Clip Drive:

Learn More

Here are some links to Google Help and Learning for this service:

These need culling, sorting and cleaning up. TBD
Additional Google Apps help and learning resources are listed on our Google Apps Help page.
Ć
jazz-clip.mp3
(516k)
Steve Raab,
Jan 8, 2013, 1:08 PM
v.1