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:
- Create an audio player for each audio file
- 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:
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:
From under 'Multimedia' choose 'Audio Player'
Choose 'Add New Audio Player' from the drop down menu and select the 'Add/Edit Audio Player' button
Add a title for the audio in the 'Audio Title' field and a description in the 'Audio Description' field
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.
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.
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.
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.
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.
Audio Responsive - Checking that box will create a responsive audio player that fills the width of the page.
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.
Loop Audio - When this box is checked, when the audio is played to the end, it will begin playing again from the start automatically
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.
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.
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.
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.
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.
Choose 'Save Audio Player'
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.
To Embed an Audio Playlist:
Click on each section to expand for more information.
Under 'Multimedia' choose 'Audio Playlist'
Choose 'Add New Audio Playlist' from the drop down menu and click the 'Add/Edit Audio Playlist' button.
Add a title for the audio in the 'Playlist Title' field and a description in the 'Playlist Description' field
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.
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.
Add a Playlist Width for the Player size
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.
Playlist Responsive - Checking that box will create a responsive audio playlist player that fills the width of the page.
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.
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
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.
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.
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.
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.
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.
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.
Choose the 'Save Playlist' button
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.
