Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

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.