How to Play Tracks from Media Library in Elementor Audio Player

Mariana

4 years ago

How to Play Tracks from Media Library in Elementor Audio Player.

A Step-by-Step Guide on Creating an Audio Player Using Elementor
Top-5 Elementor WordPress Themes with JetElements Addon Onboard

If you run a website that requires regular updates with music files, you might look for a tool that will help you to embed the files to a website easily. Fortunately, developers have made this possible with Elementor Page Builder and JetElements plugin. The latter includes a specific widget allowing you to include audio files right on the site, edit and style them up at the push of a button. In this comprehensive step-by-step guide, you will find out how to create an audio player with Elementor and JetElements and play tracks from the media library.

Let’s get started.

A Step-by-Step Guide on Creating an Audio Player Using Elementor

In this guide, we will find out how to create an audio player with Elementor and make it possible to play tracks on your WordPress website. To create this specific audio player, you will need a basic must-have plugin for Elementor called JetElements. It comes with a great number of modules which are essential for website building. Some of them include pricing table, posts, countdown timer, banner, contact form, and audio player. You can get JetElements plugin here.

With JetElements audio player widget, you can create a variety of designs by adding a background image or gradients to a background, or by applying a different border radius, or by just making it look minimalistic. These and other changes can be done through the Elementor Page Builder. So, let’s see it in action.

Open up Elementor Editor and start with creating a new section.
Go to the Elements panel and find the Audio Player widget. Drag and drop the widget on a newly created section.
Navigate to the Content section within the editor and decide on whether you want to pull out the file from the media library or external link. Choose one of the options from the Audio Source.
If you opt for a self-hosted option, click on the box below to be taken to the media library where you can select the file you want to be played in the audio player. Grab it and press Insert Media.
Play with the audio options: set the track to be muted, and change the control options settings if needed.
Go to the Advanced section to style the audio player the way you like. Experiment with the background, border, responsiveness, and other settings.
Navigate to the Style section to style some elements of the audio player, like width, alignment, play-pause button, progress, volume, etc.

Here are simple steps on how to create an audio player using the Elementor Page Builder and JetElements plugin. You can also watch the video tutorial or jump to the other tutorials we have.

Top-5 Elementor WordPress Themes with JetElements Addon Onboard

Now that you know how to build and apply an audio player to your website, you may need an Elementor WordPress theme that comes equipped with JetElements plugin. So, you won’t have to purchase the plugin separately. Let’s move on and consider the top five Elementor WordPress themes specifically developed for people who plan to launch a website containing a bulk of music content.

Singum - Podcaster Multipurpose Classic Elementor WordPress Theme

This classy Elementor WordPress theme is your trump card in terms of expanding your audience. Clean and minimalist design lets you focus on the most important information, while the instrument set allows you to customize the site with ease. With Singum, you’ll get an opportunity to showcase episodes, latest news, and other content. Apart from that, the built-in Elementor editor in conjunction with JetElements plugin will help you to embed an audio player and play tracks from your media library. As for the rest of the features, they include:

A variety of elegant pages for all occasions.
Ecwid plugin.
Bonus images and more.

Avenus - Music One Page Modern Elementor WordPress Theme

If you are looking for a ready-made solution that would ensure a professional presentation of your brand, Avenus is exactly what you need. Responsive layout with advanced functionality makes Avenus a tidbit for everyone who wants to get a first-class product that doesn’t require much time and effort. Aside from a collection of pre-designed pages, this WordPress theme provides a well-known drag-n-drop content editor along with Jet family plugins. That being said, you have an opportunity to add different types of content to the site by using various modules and widgets, like an audio or video player. Among other outstanding features, consider the following:

Blog functionality.
Contact and newsletter subscription form.
Gallery, etc.

DJ Beatmix - Personal Page Elementor WordPress Theme

DJ Beatmix is great for those who want to share tracks and information about projects with the audience regularly. Additionally, the vivid design of this Elementor WordPress theme will let visitors enjoy browsing your website. Integrated Elementor Page Builder together with JetElements add-on will let you embed the tracks right to the page, while Ecwid plugin will help to establish a store and sell music online. The other cool features include:

Social options and commenting system.
Entire set of Jet add-ons.
Bonus high res images on different topics.

Filmudio - Movie Production, Film studio, Creative & Entertainment WordPress Theme

Filmudio Elementor WordPress theme has been specifically developed for corporate, personal, video blogger, or any other creative website. A clean layout and an elegant design are the features that will make your site stand out in a crowd. Apart from that, an embedded blog page will help you to become more visible in the search engines, and increase traffic and engagement at your site. As for other customization options, Filmudio comes with Elementor Page Builder that ensures code-free and fast content building. In conjunction with JetElements plugin, it allows adding different modules including audio and video players. The other features include:

WPML translator.
Four homepages.
Ajax functionality and much more.

Loungez - Night Club Elementor WordPress Theme

If you run a nightclub, karaoke bars, or dance hall website and search for a solution to upgrade it, give Loungez Elementor WordPress theme a try. Aside from the astounding design, it also features a responsive layout and high functionality. Inside the package, you’ll additionally find elegant pages available for any purpose, drag-n-drop page builder, and a great collection of Jet family plugins. Together with Elementor content editor, these features help to build content of any complexity as well as add advanced functionality to the site. The other options included in the theme include: