Advertisement
powylv

vinyl music player

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