Skip to main content
Web Central Quarterly Enhancements Webinar | Watch Now...

Search

Add Audio Files to a Page

  • Updated:

Currently, users can upload audio files to the Document Center and then reference the items using HTML (HyperText Markup Language). 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 content management system (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. Navigate to the desired page
  2. Ensure that the Live Edit state is toggled to ON:
    Web Central, Admin User Menu Live Edit Toggled to On.
  3. Click the Widgets tab on the Live Edit pane:
    Web Central, Admin User Menu, Widgets Tab.
  4. Drag and drop a Custom HTML widget to your page:
    Drag and drop a custom HTML widget from the Widgets tab onto your page.
  5. In the Custom HTML widget, reference the audio file:
    Add the appropriate HTML code to reference your audio file in the custom HTML widget.
    • To reference the audio file, use the relative URL (Uniform Resource Locator) 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="">
        <source src="/DocumentCenter/View/7940/lightsaber" type="audio/mpeg">
        Your browser does not support the audio tag.
        </source>
        </audio>
  6. Click the Done button:
    Click the Done button to exit the Custom HTML widget.
  7. View the Audio or Video Player:
    View the resulting audio/video player created by your HTML.
  8. Click the Save button:
    Web Central Live Edit Page Save Button.

 

Resources

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

2 comments

Date Votes
  • Caryn Jackson

    Is there any way to create a marker in the audio link so it starts at a certain point in the audio?

    0
  • Rachel Reese

    Is there a better method for this now? I successfully used it, but I am finding it doesn't work on my iphone.

    0

Please sign in to leave a comment.