Welcome to Lantro UI! Test link Buy now!

How to use Music Player

Hello everyone, As you know from Lantro UI v1.4 we provide a music player that can add your .mp3 music to your blog.

Song Poster
Faded
Alan Walker
remove add
repeat favorite volume_up
0:00:0 play_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

Docs
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

Post a 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 Lantro UI, you agreed to use cookies in agreement with the Lantro 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.