Buy Royal UI Officially! Contact Us Buy Now!

How To Use Music Player

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…

1 comment

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.