Add Audio Files to a Page

Currently, users can upload audio files to the Document Center and then reference the items using HTML. Users must have appropriate Document Center permissions to add or update files.

This is not a recommended practice for video files due to HTML video links not being supported on all browsers (for example, Internet Explorer). It allows the use of small media files without linking to another site. Using large files in this way can detrimentally affect site load speeds.

The only file format supported by the same browsers as the CMS is MP3. Any other formats may not work correctly depending on the web browser.

There is no built-in tool or widget to house media files. Media files can be referenced using any widget or item that allows HTML editing. This includes but is not limited to Custom HTML widgets, Editor widgets, or Info Advanced items.

Who can use this feature?

System Administrators | Owners | Publishers | Authors

Instructions

1. Sign in to your website solution

2. Navigate to the desired page

3. Make sure that Live Edit is toggled to ON:

4. Click the Widgets tab on the Live Edit panel:

5. Drag and drop a Custom HTML widget to your page:

6. In the Custom HTML widget, reference the audio file:

   • To reference the audio file, use the relative URL of the file in the Document Center as the src. For example, to reference the following file:

     • File Link: https://cp-support.civicplus.com/DocumentCenter/View/7940/lightsaber

     • HTML to Reference the File:

       <audio controls="true" draggable="false">
       <source src="/DocumentCenter/View/7940/lightsaber" type="audio/mpeg">Your browser does not support the audio tag.
       </audio>

7. Click the Done button:

8. View the Audio or Video Player:

9. Click the Save button:

Resources

• Add the Custom HTML Widget to Your Page

• Embed Videos on a Page

• W3 Schools: Tag Video Files

• W3 Schools: Tag Audio Files