Advertisement
urgonic

music player

Jul 11th, 2021
1,691
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.03 KB | None | 0 0
  1. <head>
  2.  
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  4. <link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  5.  
  6. <script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  7.  
  8. <!-------MUSIC PLAYER BY GLENTHEMES------->
  9. <script src="https://dl.dropbox.com/s/vyffmps0ly6ikf4/glenplayer06.js"></script>
  10.  
  11. <style type="text/css">
  12.  
  13. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  14. :root {
  15. --Music-Player-Vinyl:#fff;
  16. --Vinyl-Icon-Size:22px;
  17. --Vinyl-Spin-Speed:2.5s;
  18. --Music-Controls:#fff;
  19. --Music-Controls-Size:16px;
  20. --Music-Title-Font-Size:14px;
  21. --Music-Title-Color:#fff;
  22. }
  23. .glenjams-06 {
  24. display:none;
  25. position:fixed;
  26. bottom:0;margin-bottom:30px;
  27. left:0;margin-left:30px;
  28. z-index:99;
  29. }
  30.  
  31. .pasta {
  32. display:flex;
  33. align-items:center;
  34. }
  35.  
  36. .vinyl-spin {
  37. animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  38. -webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  39. -moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  40. -o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  41. }
  42.  
  43. .vinyl-pause {
  44. animation-play-state:paused;
  45. -webkit-animation-play-state:paused;
  46. -moz-animation-play-state:paused;
  47. -o-animation-play-state:paused;
  48. }
  49.  
  50. @-webkit-keyframes recordspin {
  51. from {
  52. -webkit-transform:rotate(0deg);
  53. -o-transform:rotate(0deg);
  54. transform:rotate(0deg);
  55. }
  56. to {
  57. -webkit-transform:rotate(360deg);
  58. -o-transform:rotate(360deg);
  59. transform:rotate(360deg);
  60. }
  61. }
  62.  
  63. @keyframes recordspin {
  64. from {
  65. -ms-transform:rotate(0deg);
  66. -moz-transform:rotate(0deg);
  67. -webkit-transform:rotate(0deg);
  68. -o-transform:rotate(0deg);
  69. transform:rotate(0deg);
  70. }
  71. to {
  72. -ms-transform:rotate(360deg);
  73. -moz-transform:rotate(360deg);
  74. -webkit-transform:rotate(360deg);
  75. -o-transform:rotate(360deg);
  76. transform:rotate(360deg);
  77. }
  78. }
  79.  
  80. .vinyl svg {
  81. width:var(--Vinyl-Icon-Size);
  82. height:var(--Vinyl-Icon-Size);
  83. }
  84.  
  85. .music-controls {
  86. margin-left:10px;
  87. width:var(--Music-Controls-Size);
  88. overflow:hidden;
  89. cursor:pointer;
  90. }
  91.  
  92. .music-controls svg {
  93. width:var(--Music-Controls-Size);
  94. height:var(--Music-Controls-Size);
  95. color:var(--Music-Controls);
  96. stroke-width:1.5px;
  97. }
  98.  
  99. .pausee {display:none;}
  100.  
  101. .beff {display:none;}
  102. .aff {display:block;}
  103.  
  104. .music-title {
  105. margin-left:8px;
  106. font-family:times new roman;
  107. font-size:var(--Music-Title-Font-Size);
  108. color:var(--Music-Title-Color);
  109. }
  110. </style>
  111. </head>
  112.  
  113. <!-------MUSIC PLAYER BY GLENTHEMES------->
  114. <!-------hide in body top------->
  115. <div class="glenjams-06">
  116. <div class="pasta">
  117. <div class="vinyl"></div>
  118. <div class="music-controls">
  119. <div class="playy"><i data-feather="play"></i></div>
  120. <div class="pausee"><i data-feather="pause">"HOSPITAL HALLS"</i></div>
  121. </div>
  122. <div class="music-title"></div>
  123.  
  124. <audio id="audio" src="https://www.dl.dropboxusercontent.com/s//gs0w3nhpw09wfie/Yume%202kki%20OST%20-%20The%20Ceiling%20%28Reversed%20%26%20Extended%29.mp3?dl=0" type="audio"></audio>
  125. </div><!--pasta-->
  126. </div><!--glenjams-06-->
  127. <!----end music player---->
  128. <script>feather.replace()</script>
  129.  
  130. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement