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

About the Author

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 while playing with it.

Facebook ID Telegram ID

إرسال تعليق

  • A-
  • A+

© Royal UI TEST. All rights reserved.

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.