Buy Royal UI Officially! Contact Us Buy Now!

How To Use Music Player

2 min read
Hello everyone, As you know from Royal Ui we provide a music player that can add your .mp3 music to your blog.

Song Poster
Faded
Alan Walker
removeadd
repeatfavoritevolume_up
0:00:0play_arrow

How to add?

<div align="center">
<div class="player-STLH">
<div class="cover-PS">
<img alt="Song Poster" src="add_image_here" title="title_here">
</div>
<div class="info-MS">
<div class="title-MS">song_title_here</div>
<div class="singer-MS">creator_name_here</div>
</div>
<div class="volume-box">
<span class="volume-down"><i class="material-icons">remove</i></span>
<input type="range" class="volume-range" step="1" value="80" min="0" max="100"
oninput="music.volume = this.value/100">
<span class="volume-up"><i class="material-icons">add</i></span>
</div>
<div class="btn-box">
<i class="material-icons repeat" onclick="handleRepeat()">repeat</i>
<i class="material-icons favorite active" onclick="handleFavorite()">favorite</i>
<i class="material-icons volume" onclick="handleVolume()">volume_up</i>
</div>

<div class="music-box">
<input type="range" step="1" class="seekbar" value="0" min="0" max="100" oninput="handleSeekBar()">

<audio class="music-element">
<source src="song_src_here">
</audio>
<span class="current-time">0:0</span><span class="duration">0:0</span>
<span class="play" onclick="handlePlay()">
<i class="material-icons">play_arrow</i>
</span>
</div>
</div>
</div>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

Don't forget to replace hilighted parts

How was the article?

Hey ! My name is Samir, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator from Feni,Dagonbhuiyan,Bangladesh. I love to Code and create interesting things whil…

You may like these posts

  • Widget Blog Some guidelines for Blog Widgets or post settings, such as some custom post modes found in certain templates, activating the Dark Mode feature permanently etc. …
  • Mobile Settings We highly recommend that you turn off the default mobile setting on Blogger. We designed a theme that can adapt to all specific screen sizes, so Blogger's defaul…
  • We use Blogger data:messages default message form in this theme to automatically change some default sentences according to the language selected in Blogger settings. You can c…
  • The Number of Articles That Appear Doesn't Match In some cases sometimes the number of articles appearing on the home page is less than the number specified in Blogger settin…
  • Most of these features can only be used in 'HTML View' mode, nor can you switch to 'Writing view' mode while using some of these features. In post editor view, cl…
  • Adding Numbers to Headings and Hiding them in Table of Content In some themes that support automatic or semi-automatic Table of Content(next we will briefly describe ToC), the h…

1 comment

  1. second ago

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Royal UI, you agreed to use cookies in agreement with the Royal UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.