Thank you for checking out my music player tab!
This page includes the codes and customization pointers.
Features:
- no flash required (i.e. no external hosts)
- ONE song only
- audio progress track
- music duration (automatically generated)
- song title
Please do not steal or claim as your own, thank you! (ง •̀‿•́)ง
Paste the following between
<head> and
<style type="text/css">:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/m8Ypn96yc/glenplayer04.js"></script>
Paste the following between <style type="text/css"> and </style>:
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer04 {
position:fixed;
bottom:0;margin-bottom:25px;
left:0;margin-left:25px;
z-index:99;
}
#gt-player {
display:flex;
padding:15px;
background:#31302E; /* main music player background color */
border-radius:3px 3px 0 0;
}
#gt-player > div {
align-self:center;
-webkit-align-self:center;
}
#music-controls {
user-select:none;
-webkit-user-select:none;
width:12px;
font-size:12px;
cursor:pointer;
color:#ceccdb; /* play & pause button color */
}
.pausee {display:none;}
#gt-barwrap {
margin-left:15px;
padding:5px 0;
cursor:pointer;
}
#gt-musicbar {
min-width:100px;
height:2px;
background:#222; /* music bar color (not played) */
border-radius:4px;
display:flex;
}
#gt-musictrack {
height:inherit;
background:#ceccdb; /* music track color (played) */
border-radius:4px;
width:0;
}
#gt-blob {
align-self:center;
-webkit-align-self:center;
margin-left:-4px;
width:8px;
height:8px;
border-radius:100%;
background:#ceccdb; /* music slider blob color */
}
#music-duration {
margin-left:15px;
font-family:consolas-alt;
font-size:10px;
letter-spacing:0.5px;
color:#b5b5b5; /* music time text color */
}
#gt-songtext {
margin-top:0px;
padding:10px 15px;
background:#3d3c3b; /* song title background color */
border-radius:0 0 3px 3px;
font-family:consolas-alt;
font-size:10px;
line-height:1em;
color:#c5c5c5; /* song title color */
overflow:hidden;
}
@font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
Paste the following between <body> and </body>:
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer04">
<div id="gt-player">
<div id="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div id="gt-barwrap">
<div id="gt-musicbar">
<div id="gt-musictrack"></div>
<div id="gt-blob"></div>
</div></div>
<div id="music-duration"></div>
</div>
<div id="gt-songtext">Roselia - Ringing Bloom</div>
</div>
<audio id="symphonia" src="https://rhizo.gitlab.io/m/Ringing_Bloom.mp3" type="audio"></audio>
<!----end music player---->
inserting your own song:
You can upload songs from your computer and grab the link through one of
these tutorials.
Replace the highlighted area as shown with your song link:
<audio id="symphonia" src="https://rhizo.gitlab.io/m/Ringing_Bloom.mp3" type="audio"></audio>
Editing song title:
<div id="gt-songtext">Roselia - Ringing Bloom</div>
Changing background color:
#gt-player {
display:flex;
padding:15px;
background:#31302E; /* main music player background color */
border-radius:3px 3px 0 0;
}
Changing color of play & pause:
#music-controls {
user-select:none;
-webkit-user-select:none;
width:12px;
font-size:12px;
cursor:pointer;
color:#ceccdb; /* play & pause button color */
}
Changing color of music bar:
(In this preview, it's the darkest black)
#gt-musicbar {
min-width:100px;
height:2px;
background:#222; /* music bar color (not played) */
border-radius:4px;
display:flex;
}
Changing color of music track:
(the part that's already been played)
#gt-musictrack {
height:inherit;
background:#ceccdb; /* music track color (played) */
border-radius:4px;
width:0;
}
Changing color of music slider:
(the circular blob)
#gt-blob {
align-self:center;
-webkit-align-self:center;
margin-left:-4px;
width:8px;
height:8px;
border-radius:100%;
background:#ceccdb; /* music slider blob color */
}
Changing color of duration text:
#music-duration {
margin-left:15px;
font-family:consolas-alt;
font-size:10px;
letter-spacing:0.5px;
color:#b5b5b5; /* music time text color */
}
Changing background color of song title:
#gt-songtext {
margin-top:0px;
padding:10px 15px;
background:#3d3c3b; /* song title background color */
border-radius:0 0 3px 3px;
font-family:consolas-alt;
font-size:10px;
line-height:1em;
color:#c5c5c5; /* song title color */
overflow:hidden;
}
Changing color of song title (text):
#gt-songtext {
margin-top:0px;
padding:10px 15px;
background:#3d3c3b; /* song title background color */
border-radius:0 0 3px 3px;
font-family:consolas-alt;
font-size:10px;
line-height:1em;
color:#c5c5c5; /* song title color */
overflow:hidden;
}
Unfortunately, moving it to the right side requires a new script. Feel free to ask me for it but I only recommend doing so if you have prior experience with coding.
If you need more assistance, please send me a message!
Credits:
The song in this preview is "Ringing Bloom" by Roselia, produced by Elements Garden for Bandori