Play MP3 Tracks from Media Library in Elementor Audio Player

Play MP3 Tracks from Media Library in Elementor Audio Player


Hi everyone! Welcome to this tutorial In this video we’ll be creating an audio player with Elementor on your WordPress website So first of all you will need a JetElements plug-in
to create this type of audio player You can get JetElements if you follow the link
in the description under this video And here you can see the examples of the audio
player modules That you can create with this plug-in This audio player can play files from your
media library or from the external links It became possible to
create an audio player A fully designed audio player with JetElements pretty recently So if you already have JetElements consider updating it to the latest version So you have an option to create an audio player As you see, you can make a variety
of designs with these new widget So you can add a background image,
you can add gradients to your background You can make a different borders,
different border radius Applying different border radius And you can also
make it really minimalistic Alright so now let’s jump right in the
Elementor editor And this is the one that I have pre-designed
before and now I’m gonna delete it And we’re going to recreate
the same design right now So you can see how this new widget works So now we go to elements panel and I’ll
search for… I”ll search for audio player This is how this widget is going to look You drop it onto a new section So once you have added this widget
to your page you have to make a choice Whether you want to pull out the file
from the media library on your WordPress website Or you want to pull it out from the external link So it is pretty simple – you grab the link anywhere
you get your music and you put it in here And then it works just the same way
as with the self-hosted file And I’ll show you how to do it with the self-hosted file So here you have this box and I have to click on it
and it takes you to the media library Where you can choose the file that you want
to be played in your audio player So here grab it and you press insert media And there you have some generic design So now let’s have a look at the options
that are available for you So there are some settings such as audio options You can set these track to loop Or you can set it to be muted You know once the user clicks on it It’s going to be muted and then
the user can just choose what volume They want the track to play at Also here have the control options so you can disable some of the elements in there Such as the progress bar, the start time,
the iteration time, the volume, the volume bar Alright let’s have a look at all of
those so the progress bar Once you disabled it, you don’t have
the progress bar anymore, than the current time Duration time, volume and you can keep on going until you have just the play button Also you can choose what type of the volume bar layout you want to have either horizontal or vertical And you can set the start volume So here’s the little note that the start volume is the volume that this player will start playing the track Ok, now the great news is that you also have an option to style this audio player just the way you like So first let’s have a look at how
you can change the background Of this player So what I need to do is to go to the Advanced tab Of this particular widget
and go to the background And here you have the option to choose the color Or you can also set it as a gradient color So like that And you pick the gradient location, the angle You know, like you usually do with the gradients And there’s also an option to set an image as the background As for the color let’s set this one Also if you want to have a rounded borders
– you go to the border, Border radius and set it to 50 Then let’s style some of the elements of
the player So what you can do here is
you can set the width of the player So if you don’t want it to be full width
– it doesn’t have to be Here you can center it
or align to the right or to the left And here we go these settings
for the play and pause button So here set the size of the icon Right here on the button The color and the background color
on normal and on hover Like so and you can also set the border
radius like on the 50 So we have the fully round button,
you can also add the border if you wish And here we go the topography
and the style settings for the text In our case this is the time These digits representing the time Then there goes Progress,
you can choose the height of the progress bar Here it goes And these settings for the volume,
there’s also the icon and the progress bar Change the font size,
change the color So here it goes Don’t forget to go to the description under this video
to check out JetElements plug-in And also for this tutorial I used
Monstroid2 WordPress theme If you want to learn more about
this theme and what’s special about it And why it is so great I totally recommend you
going to the description of this video And checking the link to Monstroid2 WordPress theme So if you want to see more tutorials on
JetElements and Elementor And Monstroid2 check out our youtube channel And I hope you like this video,
thank you so much for watching And I’ll see you another time

Only registered users can comment.

Leave a Reply

Your email address will not be published. Required fields are marked *