Tutorial

Embed an Audio File Using the Built in Player

Audio files can be embedded on your content, department or portal pages using the built in audio player. The audio player has a responsive design option so it will adjust to the screen size on any desktop or mobile device. A user will be able to listen to the embedded audio file directly from your pages. 

The audio player will play .mp3 files.

Here is an example of an embedded audio player:


To Embed an Audio File:


 Click each section to expand for more information:

1. From under 'Multimedia' choose 'Audio Player'

From under 'Multimedia' choose 'Audio Player'

 

Audio Player
2. Choose 'Add New Audio Player' from the drop down menu and select the 'Add/Edit Audio Player' button

Choose 'Add New Audio Player' from the drop down menu and select the 'Add/Edit Audio Player' button

3. Add a title for the audio in the 'Audio Title' field and a description in the 'Audio Description' field

Add a title for the audio in the 'Audio Title' field and a description in the 'Audio Description' field

 

Embed an Audio File Using the Built in Player
4. Upload or Choose the Audio File

If uploading the file directly to the site, in the 'Audio File' field, click 'Upload Audio File' and select the file from your local drive. Visit the tutorial on uploading large files directly through your control panel for further instruction if necessary.

 

Embed an Audio File Using the Built in Player

 

 


   
To select the file from your Amazon S3 Account choose the 'Select Amazon S3 Audio File' link. Visit the tutorial on using Amazon S3 to upload your files for more instruction if necessary.

 

 

 

To use an audio file hosted at another third party solution, click 'Enter Other Audio URL' and enter the full URL of the audio file in the box. Visit the tutorial on using files hosted from a third party for more instruction if necessary.

 

5. Click on 'Upload Image File' to select an image for the Video Player.

Audio Image - Click on 'Upload Image File' and select an image from your local drive. This image will appear as the static image for the audio player. The control bar will appear at the bottom of the image.

 

Embed an Audio File Using the Built in Player
6. Add an Audio Width in Pixels and Choose a Video Skin

6. Add an Audio Width in Pixels

6a. In the 'Video Skin' field, select the type of skin for the player from the drop down menu. The options are slim, fat or full.

 

Embed an Audio File Using the Built in Player
7. Check the box for 'Fixed Controls' to show the controls on the Audio Player for the whole time

Check the box for 'Fixed Controls'. If that box is checked, the controls will be shown the whole time. If the 'Fixed Controls' is left unchecked, the bottom controls will only show when the user hovers over the audio player. *If there is no image uploaded, the controls will always show.

 

Embed an Audio File Using the Built in Player
8. Checking the 'Audio Responsive' box to create a responsive audio player

Audio Responsive - Checking that box will create a responsive audio player that fills the width of the page.

 

Embed an Audio File Using the Built in Player
9. Check the 'Audio Autoplay' box to automatically begin play once the player is loaded

Audio Autoplay - Check that box if the audio file should automatically begin playing upon loading. Leave the box unchecked so the user has to manually click the play button to begin listening.

 

Embed an Audio File Using the Built in Player
10. Check the 'Loop Audio' box to automatically restart the audio when it has completed

Loop Audio - When this box is checked, when the audio is played to the end, it will begin playing again from the start automatically

 

Embed an Audio File Using the Built in Player
11. Choose the initial volume setting for the audio from the 'Audio Volume' drop down box

Audio Volume - Choose the initial volume setting for the audio from the drop down box. The user can manually adjust the volume in the controls.

 

Embed an Audio File Using the Built in Player
12. Set the Color for the buttons on the control bar in the 'Button Color' field

Button Color - Set the Color for the buttons on the control bar. Click in the box and enter the hexadecimal color if known, or click in the color box to choose a color.

 

Embed an Audio File Using the Built in Player

 

Embed an Audio File Using the Built in Player
13. Set the color for the volume and progress bars on the player through the 'Progress/Volume Bar Color' box

Progress/Volume Bar Color - Set the color for the volume and progress bars on the player. Click in the box and enter the hexadecimal color if known, or click in the color box to choose a color.

 

Embed an Audio File Using the Built in Player

 

Embed an Audio File Using the Built in Player
14. Set the color for the color behind the volume and progress bars through the 'Playbar Background Color' box

Playbar Background Color - Set the color for the color behind the volume and progress bars. Two colors can be set as the color will appear as a gradient. The first color will appear on the bottom and the second color will appear on the top. Click in the first box and enter the hexadecimal color if known, or click in the color box to choose a color. Repeat in the second box.

 

Embed an Audio File Using the Built in Player

 

Embed an Audio File Using the Built in Player
15. Set the color for the background of the audio in the 'Screen Color' box

Screen Color - Set the color for the background of the audio. Click in the box and enter the hexadecimal color if known, or click in the color box to choose a color.

 

Embed an Audio File Using the Built in Player

 

Embed an Audio File Using the Built in Player
16. Choose 'Save Audio Player'

 Choose 'Save Audio Player'

17. Copy the CF tag and paste it in the main text box of a content, department or portal page

 Copy the CF tag and paste it in the main text box of a content, department or portal page where you would like the audio to be shown.

 

Embed an Audio File Using the Built in Player