Since version 1.8.0 Presto Player comes with the “Presto Audio” block for Gutenberg. With Presto Player Audio block, add and play audio files on your website easily.
In addition, you can customize your player, add a call to action, or enable the email capture option. Also, next to Gutenberg, you can add Presto Audio with other page builders by using the media hub or shortcode.
Presto Audio
Presto Audio block supports adding MP3 or WAV files to your website. Further, you have a great number of options available with the Presto Audio player. Firstly, the player comes with all needed play controls:
- Play button
- Rewind & Fast Forward
- Progress Bar
- Current Time
- Volume
Secondly, there are quite a few options available with free Presto Player. Once you click on the Presto Audio block, check the right-side panel for these settings:
- Title – edit the displayed title of your added audio;
- Poster image – you will find this option under the “Audio Settings” section. Here, you can add your audio cover image;
- Presets – you can choose between four alternative premade layouts (presets): Default, Simple, Minimal, or Course;
- Global Player Branding – you can set the Audio block background color.
Presto Player Pro
In addition, if Presto Player Pro is activated on your website, you will see additional options. Thus, you can create chapter markings (Chapters) and add your custom presets (Add New Preset).
Further, when creating a custom preset, you can set the layout to Basic or Stacked. Now, add other settings to your custom preset:
- Controls – choose which controls should be displayed;
- Behavior – you can opt to save the user’s play position from the previous visit (Save Play Position), play audio only if it’s visible (Focus Mode), stick audio to the side of the screen (Sticky On Scroll), and choose what happens once the audio ends (On Audio End);
- Style – here, you can set color for audio controls, and set round corners;
- Email Capture – enable this option to customize and add an e-mail gate at the beginning or any part of the audio. This will require users to add their e-mail addresses to listen to the audio;
- Action Bar – you can add a notice bar with the call-to-action button at the player bottom. You can also customize it and decide when it should be displayed;
- Call To Action – this option will add an overlay with the call-to-action button over your audio. Users will be required to visit your link to play the audio.
Adding Presto Audio To Your Website
There are two methods for adding Presto Player Audio to your website. You can do it by adding audio to individual posts or pages or using the media hub:
Method One – Add Audio to Post or Page
You can add audio to your individual Gutenberg-built post or page by following these steps:
Step 1 – Start editing your post or page with Gutenberg. Here, click to add blocks, search for the “Presto Audio” block, and add it to your page or post.
Step 2 – Click on the block, and choose the audio source. This can be self-hosted or the URL of your audio file;
Step 3 – Once the audio is loaded, you can adjust the block settings. Accordingly, you can add Chapters, Autoplay, Add Poster (Cover) image, use presets, add Branding, etc. Click “Publish” to save changes.
Presto! You added audio to your post or page.
Method Two – Media Hub
If you need to add your audio to multiple places on your website, you can use Media Hub. This way, if you want to make any changes to the audio, you can do it from one place.
Modify audio in Media Hub, and changes will be applied to all places where you added that audio.
Also, you can use the Media Hub to add audio to posts and pages built using Elementor or Beaver Builder. Furthermore, you can use the shortcode to add your audio anywhere on your website.
Add Audio To Media Hub
Follow these steps to add audio to Media Hub:
Step 1 – Navigate to Dashboard > Presto Player > Media Hub. Here, click on the “Add New” button, and give your audio a name;
Step 2 – Next, choose the “Audio” type. Also, select where your audio is stored. Thus, you can add self-hosted audio are the URL of your audio file;
Step 3 – Once the audio is loaded, you can adjust the block settings the same way as with method one. Click “Publish” to save your audio;
Add Media Hub Audio To Page or Post
Now, the audio is ready, and it’s time to add it to your page or post. You can do this using Gutenberg:
Step 1 – Start editing your page or post with Gutenberg. In the top-right corner, click on the “Presto Player” icon to open the list of all media in your Media Hub;
Step 2 – Find the audio you want (browse or use the search tool), and just click on it. This will add that audio to a page or post;
Step 3 – When you click on the block, you will only see the “Manage Media Hub” option. Thus, any changes you want to make for this audio can be done in Media Hub.
You successfully added a video using Presto Player with Gutenberg.
Elementor and Beaver Builder
Furthermore, you can add audio using Elementor or Beaver Builder following these steps:
Step 1 – Start editing your page or post with Elementor or Beaver Builder. Search for the “Presto Player Media” widget/module and add it where you want;
Step 2 – You will get several options when clicking on the widget/module. Firstly, choose a media by clicking on the dropdown menu and selecting the “Audio” option, Next search and select the audio you previously saved;
Step 3 – Additionally, you can click on the “Edit Media” to modify the video settings. This will open the media hub to adjust settings like you previously did.
Shortcode
The Media Hub allows you to use Presto Player with non-block-based builders, theme features, and 3rd party plugins. To use the presto_player shortcode on your site, follow these steps:
Step 1 – Navigate to Dashboard > Presto Player > Media Hub;
Step 2 – Find the video you need in the Media Hub list, and copy the video shortcode;
Step 3 – Paste the video shortcode to the desired location on your site.
You can find more detailed information on using shortcodes in this article.