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.

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

Previous

Next