Audio | Sitely Documentation

Sitely’s Audio player allows you to add audio content to your website with a simple component that can be themed to match the style of your website. This what the player component looks like.

The player also has three different styles. The ‘With’ and ‘Without’ background options are full payers as shown above. The difference is that one will have a background color, whilst the other will be transparent, allowing the background colour of your web page to show through. The mini style is a simple play button only that looks like this.

When activated the icon will change to a pause button

Light Theme

Dark Theme

Example Custom Theme

The other options in the style panel are self-explanatory. You add an audio file (MP3 format)) by clicking the Add button. You can set an initial volume, select an accent colour, and choose which controls you would like to display in the player. If you choose the Custom style option, you will also be able to set a Background and Control color for your player. You can add as many audio player components to your page as required. When one player is activated, any other player currently playing will stop, preventing multiple audio tracks playing simultaneously. This means you can build a simple multi-track audio player by simply adding a stack of individual players on the page.

Building a custom player with a playlist

If you want to create a player with a built in playlist, it’s easy in Sitely. Instead of adding the audio component directly on the page, add them to pop-ups instead. When you add an audio player to a popup, you will see a couple of extra options in the style panel. These are: Start when Popup Opens and Close Popup at end. Both of these options should be checked. Create one popup for each track you want to include in your playlist. Ensure the popup type is set to ‘Normal’ and make sure they ALL have the same Group ID.

Once you’ve created the popups and added your audio components, you can design your track list. In the example below, two standard boxes were created. The top (grey) box has rounded top corners, and the bottom (black) box has rounded bottom corners. The bottom box is sized to the exact same dimensions as the popups. The track list is a standard text box overlaid onto the grey box. Each track title has an ‘On-Click’ action of ‘Open Popup’. Set the on-click action to open it’s associated popup.

All that remains to be done is to Group the entire track list into a single element and position it where you want it displayed on your page. Next, open each popup in turn and position them over the black box under the track list. When you preview, your custom player will appear on screen. Clicking a track title will display the player controls under the track list and will automatically start playing. Clicking another track will close the current player and replace it with the new one. Give it a try on the example below.

When utilized in this manner, the audio player incorporates a pause feature. If another track is chosen before the current one finishes, the player automatically pauses the playback of the incomplete track. This ensures that when the user returns to the track, it resumes playback from the point where it was paused.