Tutorial

How to Create an Audio Playlist

An audio playlist allows you to create one audio player that plays multiple audio clips. The user can pick and choose which audio clips to play, or it can be set up to auto-play which will automatically play each clip.

Audio playlists can be embedded on your content, department or portal pages. The audio playlist 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 view the embedded audio clips directly from your pages. 

There are two steps to creating an audio playlist:

  1. Create an audio player for each audio file
  2. Create the audio playlist

Once the audio playlist is created, new audio files can be added by creating the audio player first and then editing the audio playlist to include the new mp3.

Here is an example of an embedded audio playlist:

 

Jay Cram School

 

 


To Embed an Audio Playlist:

 

Click on each tab for instructions for part 1 and part 2

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

 

 

To Embed an Audio Playlist:

 

Click on each section to expand for more information.

1. Under 'Multimedia' choose 'Audio Playlist'

Under 'Multimedia' choose 'Audio Playlist'

 

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

Choose 'Add New Audio Playlist' from the drop down menu and click the 'Add/Edit Audio Playlist' button. 

 

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

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

 

How to Create an Audio Playlist
4. Select the audio files for this playlist

All of the audio players that have been set up will appear in the 'Available Audios' box in the 'Playlist' field. Select the audio files for this playlist (multiple files can be selected by holding the Ctrl key) and choose the <<< button to move them to the Playlist box

 

The Audio Files will Appear in the Playlist box.

The audio files in the playlist box can be rearranged by selecting the audio file and then clicking on the up or down buttons depending on where you would like to move them.

 

5. Click on 'Upload Image File' in the 'Playlist Image' field to add an Image to the player

Playlist 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 playlist player before it begins playing.

 

6. Add a Playlist Width for the Player size

Add a Playlist Width for the Player size

 

7. Check the box for 'Controls Below' if you'd like the controls to always show

Check the box for 'Controls Below'. If that box is checked, the controls will be shown the whole time. If the 'Controls Below' is left unchecked, the bottom controls will only show when the user hovers over the audio player.

 

8. Check the 'Playlist Responsive' box to create a responsive audio playlist player that fills the width of the page

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

 

9. If the audio should automatically begin playing upon loading, check the 'Playlist Autoplay' box

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

 

10. To automatically restart the audio when it has completed, click the 'Loop Playlist' box

Loop Playlist - When this box is checked, when all of the audio clips come to an end, the playlist will begin playing again from the first video clip automatically

 

11. Choose the initial volume setting for the audio playlist from the drop down box in the 'Playlist Volume' field

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

 

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.

 

13. Set the color for the buttons on the control bar when the user hovers over them in the 'Button Hover Color' field

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

 

14. Set the color for the volume and progress bars on the player in the 'Progress/Volume Bar Color' field

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.

 

15. Set the color for the color behind the volume and progress bars in the 'Playbar Background Color' field

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.

 

16. Set the color for the background of the audio playlist player in the 'Screen Color' field

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

 

17. Choose the 'Save Playlist' button

Choose the 'Save Playlist' button

18. 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.

How to Create an Audio Playlist