Adding Audio

MP3 files can be played directly on a page with the HTML5 audio element. As a fallback for older browsers, you can also include the Flash-based JWPlayer. Currently, this is a two-step process: 1) upload and publish your audio files, and 2) embed our custom code that places the player(s) on your page.

Example Player

Duke Ellington, “Louisiana” (public domain)

Before You Begin

This process involves editing the page HTML.

Icon IdeaTips

  • If the HTML code below doesn't seem to work, be sure to contact us at to to verify that the appropriate tags for embedding have been allowed (the <object> and <param> tags).
  • To preserve the alternate content provided for devices without Flash, you must edit and save without the visual editor[*].

Upload Audio File(s)

Individual audio files must be online before you can reference them in your HTML code. Upload and publish them the way you would any other File(s).

In these instructions we refer to the URL, or location of this file, as "audio.mp3". If uploading audio to your site, you can get the full URL at any time by browsing to the location through folder contents, copying the link from the address bar, and removing the part of the address that says "/view".


Embed Code

To embed a player for a single MP3 on a page, paste the following code, replacing the .mp3 reference ("files/audio.mp3") with the URL of your choosing:

<audio src="files/audio.mp3" controls="controls">
<object data="" height="24" width="300"
<param name="data" value="" />
<param name="src" value="" />
<param name="wmode" value="opaque" />
<param name="flashvars" value="file=files/audio.mp3" />
<!-- For devices that don't have Flash -->
<p style="padding:1em; border:1px solid #e3e2da; background:#f1f0ec;">To access
this content, please revisit with a web browser that has the latest version of
<a href="">Adobe Flash Player</a> installed.</p>
<!-- End alternative content -->

warning*Important: To preserve the alternate content provided for devices without Flash, you must edit without visual editor, and save the page from this mode (by clicking "Edit without visual editor") for all changes. Otherwise, the visual editor may strip out content contained within the opening and closing <object> tags—a known issue.


Save and Test

You won't be able to see and listen to the end result until you save and view the page. Once you view your saved page and attempt to play the audio, you can see what adjustments, if any, you need to make to your code or page layout.

  • If the audio player doesn't show up, please contact the OIS Web Team at or 966-3519 to have us check your site's security settings.


Related content
Adding Files