Our Audio Essentials widgets are the complete solution for your audio needs – big or small. This 2-pack features Audio Essentials, a simple and slim audio player, as well as Audio Essentials Pro, a full-featured showpiece audio player.
Audio Essentials fits perfectly among our series of Essentials widgets. This no-nonsense player is ideal for single songs or audio clips. Great for tight spaces!
For a showcase audio player, check out Audio Essentials Pro. This widget packs in every audio option we could think of, including custom images perfect for album covers, playlist support, and pre-styled themes.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.3
Supported Devices: Desktop, Tablet, Phone
Release Log
1.3: Improves compact mode performance on iPhone (02/01/2018)
1.2: Fixes duplicate track issue seen with audio tracks 19 and 20 (07/28/2017)
1.1: Playlist track count now supports 20 tracks instead of just 10 (04/25/2017)
1.0: Initial widget release
Setup
Open the Audio Essentials library folder. Inside, you will see 2 widgets within:
Audio Essentials: This is a simple, streamlined player that has minimal settings in the option panel, and is designed for quick plug-n-play usage.
Audio Essentials Pro: The "Pro" version of the widget is packed full of every cool feature we could think of. This widget has more options, takes a little bit longer to set up, but is much more powerful.
Audio Essentials
Drag the Audio Essentials widget from the library and drop into your project in Design mode. The widget should be placed where you would like your player to appear.
Size the widget container to the size you would like the widget to appear. The widget width determines the length of the play bar.
Open the widget option panel.
Start by selecting whether you would like to use a local file or external link. A local file will be loaded from your computer, while an external link can be any audio file hosted elsewhere on the web. Please note, if using an external link, the URL must end in ".mp3".
Load the audio file, or enter the external link.
Select a Skin Style. The Dark Skin uses dark buttons, appropriate for white/light colored pages, while the Light Skin is appropriate for dark pages.
Select your Playing Bar Color and Control Button size.
Your Audio Essentials widget is now set up and ready to preview.
Since the Audio Essentials widget simply contains a play/pause button and playback bar, you might wont to style it up to look different. Consider putting a rectangle around the player with a fill or stroke applied. You can also place text on or near the player. Finally, consider grouping these elements to keep them locked together. Also, keep an eye on the Resize setting. Most elements will be responsive width by default. You may want to apply Resize: none to all elements grouped together.
Audio Essentials Pro
Drag the Audio Essentials Pro widget from the library and drop into your project in Design mode. The widget should be placed where you would like your player to appear.
Start by selecting a Layout Mode:
Wide: Better for wider layouts, playlist is seen by default
Standard: Better for taller layouts, playlist is seen by default
Compact: Packs all of the same features as wide and standard, but hides the playlist and lays things out in a long horizontal player. Includes a small thumbnail image.
Simple: Shows just the player controls (previous, next, shuffle, repeat). The playlist is not seen, however you may still advance through songs with the previous/next buttons if several songs are loaded.
Adaptive: This mode passes the image in it's original shape (aspect ratio). If your images are all the same shape (aspect ratio), your images will be uniform. The thing to watch out for here is if you're using images of different shapes for different tracks, it can make the player control position jump around from track to track. So it's best to prep images to be the same shape.
Fixed Image: If you're unable or don't want to prep the images by cropping them to the same size, you can used the fixed setting. With this setting, you can set the fixed image height and width using the Max Width and Height settings below. All images will be constrained to these settings.
The remaining settings in the top section allow for certain buttons and features to be shown.
Note that the final two settings in the top section enable the cover image and background image. These are enabled by default. The images are loaded in the Audio Setup section below.
Styling Section
The Playlist Height setting sets the maximum size occupied by the playlist. Beyond the entered value, a scrollbar will be aplied if there is content that doesn't fit. This is good for players with long playlists on pages without a lot of space.
The Main Accent Color applies to things like the active track in a playlist or the enabled settings (like shuffle or repeat when they are toggled).
The font family is a global setting (applies to all text in the widget).
Most text has it's own size setting: Titles, Subtitles, Info Links
The "Info" section allows you to create buttons (calls to action), linking users to the URL of your choosing. These buttons can be used on layouts where the playlist is always present, like Standard and Wide. The settings in this section allow you to define the link text, font size, and whether the link opens in the same or a new window.
The final 2 settings in the Styling Section allow you to turn on the above mentioned Info URL, as well as the Download Icon. The download icon allows users to be able to download your audio tracks.
Audio Setup Sections
These sections are pretty straight forward. Each Audio "slot" is disabled by default. Enable the number of tracks you plan to use by selecting either Local File or External Link.
Local File: Click the "Add File" link to load audio files that are on your computer. These audio files will be uploaded to your server and streamed when played by a site visitor.
External Link: External audio sources are not hosted on your server, and are instead stored somewhere else on the web. This can be a potentially quicker way to stream audio. It is important that the URL used for external audio links end in ".mp3".
The Cover Images used should be uniform in size, or use a Fixed Image setting as discussed above in the Audio Essentials Pro section. Each audio track may have a unique image.
The Audio Title and Subtitles apply titles and subtitles to the playlists.
The Info URL link should be entered if Info Links are enabled in the previous section.
Repeat this process for each track you plan to use in your player.
Once your tracks are loaded, preview the player to see how things look, and adjust accordingly.