How to embed and use Audio Player on Elementor

Elementor is one of the most popular extensions for WordPress. It gives an opportunity to flawlessly use WordPress, even if you have nothing to do with web programming. This extension is used to address both the look and functionality of the website. 

Creating music- or education-related content, you might be eager to install an audio player for free. There are many methods of how you can do it, and the easiest and the fastest one is to add it with the help of a plugin. 

Even if you’ve seen tens of them on Elementor marketplace and thousands of music players for websites on the Internet, you might be eager to find the perfect one. It should be beginner-friendly, functional, appealing, and responsive. What is more, it should work faultlessly on Elementor (and WordPress, as well).

The best decision here is to choose an Audio Player widget, which meets all the requirements listed above. And I’ll tell you about my favourite one further in this article.

Elfsight Player plugin for Elementor

Elfsight is one of the most popular developers of widgets, plugins, and add-ons for websites. Their instruments allow you to create professional cross-platform extensions for any site, and Elementor is no different. Elfsight Audio Player has tons of amazing features, here are the most prominent ones:

  • All of the most common audio formats are supported, including: HLS (m3u8), DASH, mp3, mp4, ogv, webm, HLS (m3u8) (mpd)
  • Music from the most popular platforms can be added to the player by URL. SoundCloud, YouTube, Vimeo, Vista, Amazon, and Google Drive – are just a few of the services available
  • Setting up a background image and its overlay
  • All of the capabilities of a standard player, including autoplay, player information, player controls, and the ability to shuffle and repeat compositions
  • Beautiful pre-made templates that you can use right away
  • Color scheme that can be changed to your liking
  • Layouts that float and embed to give you maximum creative control of your music compositions

And so much more! You can find and try out all of them for free in an interactive demo down here. Now, let’s turn to the process of installation. By the way, the good news is that you’ll find seven additional tips and tricks on how to enhance your Elementor website using Audio Player at the end of this article. Let’s go!

How to add a player to Elementor

You can add the player via the Elementor admin panel, a floating player to all pages via Elementor Pro, and with the help of GTM. Here are all these methods described in greater detail.

How to make an Elementor website with a floating online player

If you want to add a player to all of the pages of your Elementor-based website, you may do so from the backend of your template. What you’ll need to accomplish is:

  1. Log into the WordPress admin panel after building the player plugin in Elfsight Apps.
  2. Select “Custom Code” from the Elementor section.
  3. Select “Add New Custom Code” from the drop-down menu.
  4. Give your player plugin a title and select “Head” as the location.
  5. Copy the installation code of your player and paste it into the required space.
  6. Changes should be saved.

Note that the Custom Code feature is only available with Elementor Pro.

That’s it! Now your music will be shared via a player on an Elementor website.

How to use Elementor to embed the player on a single page

Let’s look at how to use the Elementor admin panel to embed the online player on all pages, one page, or a subset of them. This approach is always available, and you’ll be able to use it in the same admin window that you’re used to.

  1. Log into the WordPress admin panel and create a player in Elfsight Apps.
  2. Select the desired page from the ‘Pages’ area of the left-hand menu.
  3. Select ‘Edit with Elementor’ from the menu.
  4. Drag the ‘HTML’ element to the appropriate page area.
  5. In the ‘HTML Code’ area, paste the installation code of a player.
  6. By pressing ‘Update,’ you can save your modifications.

Want to use the music player on other pages? All of the above steps can be repeated one by one for each page accordingly. And you won’t need Elementor Pro to implement this.

How to use GTM to add an audio player to your website

GTM (or Google Tag Manager) is a tool that allows website owners to add custom code to any platform, even if that platform doesn’t allow it. When it comes to Elementor, you can add the player using one of the two techniques listed above, or by utilizing GTM. Here’s how to go about it:

  1. Create the player in Elfsight Apps and add music compositions there
  2. Go to your Google Tag Manager account and sign in (or create one)
  3. Select ‘Custom HTML’ to create a new HTML tag
  4. Copy the first line of the installation code and paste it into the newly formed tag
  5. To the WordPress page where you wish to put the player, add a trigger and a tag there
  6. Save the tag
  7. Changes should be published

As soon as you finish doing this, your player will be available on Elementor.

Bonus! If you wish to know more about Audio Player and how to get maximum from it on a website, here are 7 fantastic tips and tricks just for you.

7 amazing tips and tricks for your Elementor player

Find out how to enhance your Elementor website with the help of a music player. Here are the main pieces of advice on how to make the player an integral part of your website and ideas on what content might be interesting for your visitors. Here we go!

  1. Make a dark music player

As any other website builder, Elementor provides an opportunity to make a dark theme for the website. Add a black music player there! It is going to be a stylish and original free addition to your exquisite Elementor site. The reduction of luminance can minimize eye strain and help you maintain appropriate contrast. So this is all a bonus!

  1. Add more than one composition

The more amazing audio files people have to listen to, the longer they will stay on your website. Time spent on a website is supposed to be one of the most crucial metrics of a web resource’s effectiveness. The more people stay online exploring your web pages and listening to music, the more Google and other search engines will support your website and display higher on SERP.

  1. Direct attention with visual cues

Place a photo in the background of your music player. Steer users’ attention by adding an image of a beautiful primeval forest or of a person practicing yoga. An attractive picture in the background will not only make users focus on the player, but also complement the overall design of your website. The plugin with this small detail and high-quality mp3 files will no doubt become an indispensable part of your site, just customize it the way you wish!

  1. Keep things simple

It doesn’t mean you should add only one audio file to the player. Impressed by the exquisite functionality of the player plugin, you might wish to add all the controls and details to the player, however, they will only over-complicate it. Choose the most essential controls and stick to one color scheme. It will make your music player clear and uncluttered.

  1. Remember about mobile optimization

Your Elementor player should look good on all devices, whether it’s a tablet, a laptop, a Mac, or a smartphone. Make sure your audio tool adapts to all screen sizes and makes it possible to employ the main feature of the player – users should be able to listen to music no matter what device they are using.

  1. Share information

People (and search engines) love how-to articles, and educational content amuses users most of all. Audio plugin is a great instrument to share comprehensive information and trust-building content in mp3. It’s also great for you to explain why your company possesses unique qualifications to provide products and services online. 

  1. Follow your color scheme strategically

Every color has a different psychological connotation. Alongside your brand colors, there are tons of tints and shades that can be treated differently. For example, if your music is energetic and passionate, you can use yellow or orange as the accent color of a player. If your compositions are tranquil, blue will work better for you. Use colors deliberately to be sustainable and form a visual hierarchy on your website.

You’ve got this!

Pretty sure, your audio plugin will be amazing after you’re done. Designing a player shouldn’t be difficult or time-consuming, that’s why you’d better choose a ready-made and free solution, such as Elfsight Audio Player. It is mobile responsive, performs all the main functions of a perfect player, supports all the popular audio formats, has tons of cool templates which you can adjust in accordance with your brand identity. Concentrate only on creating music, and leave all the technical matters to Elementor and Elfsight!