Adding Audio

MP3, AAC, and M4A audio files can be played directly on a page with the Flash-based JWPlayer, which is hosted on the School of Medicine web server for SOM site use. Currently, this is a two-step process: 1) upload and publish your audio files, and 2) embed our custom code that places the Flash-based player on your page. Since this method uses Flash, it's not accessible to users using iPads, iPhones, etc. For maximum accessibility, it's recommended that you also provide a direct download link to the file.

Example Player

Duke Ellington, “Louisiana” (public domain)

To access this content, please revisit with a web browser that has the latest version of Adobe Flash Player installed.

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 webhelp@med.unc.edu 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".

[top]

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:

<object data="http://www.med.unc.edu/webguide/files/player.swf" height="24" width="300"
type="application/x-shockwave-flash">
     <param name="data" value="http://www.med.unc.edu/webguide/files/player.swf" />
     <param name="src" value="http://www.med.unc.edu/webguide/files/player.swf" />
     <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="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a> installed.</p>
<!-- End alternative content -->
</object>

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.

[top]

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 webhelp@med.unc.edu or 966-3519 to have us check your site's security settings.

[top]

Related content
Adding Files