API tools faq
paste
Advertisement
powys

playlist music player

powys
Jun 12th, 2021
4,222
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.58 KB | None | 1 0
raw download clone embed print report
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  2. <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  3.  
  4. <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  5.  
  6. <!-------MUSIC PLAYER BY GLENTHEMES------->
  7. <script src="https://dl.dropbox.com/s/q3g9wib9m3prasf/glenplayer03.js"></script>
  8.  
  9. <style type="text/css">
  10. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  11. #glenplayer03 {
  12. position:fixed;
  13. bottom:0;margin-bottom:0px; /* music player position from bottom */
  14. left:0;margin-left:60px; /* music player position from left */
  15. font-family:karla;
  16. z-index:99;
  17. visibility:hidden;
  18. }
  19. .glen-box-title {
  20. padding:12px 15px;
  21. background-color:#222; /* music player title background color */
  22. border-radius:12px 12px 0px 0px;
  23. text-transform:uppercase;
  24. letter-spacing:1.5px;
  25. font-size:10px;
  26. color:#fff; /* music player title text color */
  27. line-height:1.8em;
  28. text-align:center;
  29. }
  30.  
  31. .glen-music-container {
  32. padding:20px;
  33. background-color:#fff; /* music player background color */
  34. border-left:1px solid #eee; /* music player left border */
  35. border-right:1px solid #eee; /* music player right border */
  36. }
  37.  
  38. .glen-row {
  39. display:flex;
  40. margin-bottom:15px;
  41. }
  42.  
  43. .glen-row > * {
  44. align-self:center;
  45. -webkit-align-self:center;
  46. }
  47.  
  48. .glen-row:last-of-type {margin-bottom:0px;}
  49.  
  50. .glen-album-art {
  51. width:40px;
  52. height:40px;
  53. border-radius:3px;
  54. }
  55.  
  56. .glen-song-text {
  57. margin-left:15px;
  58. min-width:130px; /* minimum width of song info */
  59. width:100%;
  60. }
  61.  
  62. .gst-name {
  63. font-size:12px;
  64. color:#444; /* song name text color */
  65. }
  66.  
  67. .gst-artist {
  68. text-transform:normal;
  69. letter-spacing:0.3px;
  70. font-size:10px;
  71. color:#999; /* song artist text color */
  72. }
  73.  
  74. .gst.material-icons {
  75. margin-left:15px;
  76. font-size:18px;
  77. color:#222; /* play & pause buttons color */
  78. cursor:pointer;
  79. }
  80.  
  81. .g3-before {display:none!important;}
  82. .g3-after {display:block!important;}
  83. </style>
  84. <body>
  85. <!-------MUSIC PLAYER BY GLENTHEMES------->
  86. <div id="glenplayer03">
  87. <div class="glen-box-title">clarispop~!</div>
  88. <div class="glen-music-container">
  89.  
  90. <!--START ONE MUSIC ROW-->
  91. <div class="glen-row">
  92. <img class="glen-album-art" src="https://i1.jpopasia.com/news/4/20713_nfk64y.jpg">
  93. <div class="glen-song-text">
  94. <div class="gst-name">click</div>
  95. <div class="gst-artist">ClariS</div>
  96. </div><!--glen-song-text-->
  97.  
  98. <a class="fire1" onclick="javascript:fireAudio1();">
  99. <i class="gst material-icons playy1">play_arrow</i>
  100. <i class="gst material-icons pausee1">pause</i>
  101. </a>
  102. <audio id="audio1" src="https://dl.dropbox.com/s/22he1ckywvszvcw/Click.mp3"></audio>
  103. </div><!--END ONE MUSIC ROW-->
  104.  
  105.  
  106. <!--START ONE MUSIC ROW-->
  107. <div class="glen-row">
  108. <img class="glen-album-art" src="https://otakusenvenezuela.files.wordpress.com/2021/02/claris13.jpg">
  109. <div class="glen-song-text">
  110. <div class="gst-name">gravity</div>
  111. <div class="gst-artist">ClariS</div>
  112. </div><!--glen-song-text-->
  113. <a class="fire2" onclick="javascript:fireAudio2();">
  114. <i class="gst material-icons playy2">play_arrow</i>
  115. <i class="gst material-icons pausee2">pause</i>
  116. </a>
  117.  
  118. <audio id="audio2" src="https://dl.dropbox.com/s/rfvu92ygh8kohkk/Gravity%20%281%29.mp3"></audio>
  119. </div><!--END ONE MUSIC ROW-->
  120.  
  121. </div><!--glen-music-container-->
  122. </div><!--end music player-->
  123. </body>
  124.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!