powys

vinyl music player by glenthemes

Jun 12th, 2021
8,489
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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. <style type="text/css">
  11. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  12. :root {
  13. --Music-Player-Vinyl:#000;
  14. --Vinyl-Icon-Size:17px;
  15. --Vinyl-Spin-Speed:3.5s;
  16. --Music-Controls:#000;
  17. --Music-Controls-Size:12px;
  18. --Music-Title-Font-Size:11px;
  19. --Music-Title-Color:#000;
  20. }
  21. .glenjams-06 {
  22. display:none;
  23. position:fixed;
  24. bottom:0;margin-bottom:30px;
  25. left:0;margin-left:30px;
  26. z-index:99;
  27. }
  28.  
  29. .pasta {
  30. display:flex;
  31. align-items:center;
  32. }
  33.  
  34. .vinyl-spin {
  35. animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  36. -webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  37. -moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  38. -o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
  39. }
  40.  
  41. .vinyl-pause {
  42. animation-play-state:paused;
  43. -webkit-animation-play-state:paused;
  44. -moz-animation-play-state:paused;
  45. -o-animation-play-state:paused;
  46. }
  47.  
  48. @-webkit-keyframes recordspin {
  49. from {
  50. -webkit-transform:rotate(0deg);
  51. -o-transform:rotate(0deg);
  52. transform:rotate(0deg);
  53. }
  54. to {
  55. -webkit-transform:rotate(360deg);
  56. -o-transform:rotate(360deg);
  57. transform:rotate(360deg);
  58. }
  59. }
  60.  
  61. @keyframes recordspin {
  62. from {
  63. -ms-transform:rotate(0deg);
  64. -moz-transform:rotate(0deg);
  65. -webkit-transform:rotate(0deg);
  66. -o-transform:rotate(0deg);
  67. transform:rotate(0deg);
  68. }
  69. to {
  70. -ms-transform:rotate(360deg);
  71. -moz-transform:rotate(360deg);
  72. -webkit-transform:rotate(360deg);
  73. -o-transform:rotate(360deg);
  74. transform:rotate(360deg);
  75. }
  76. }
  77.  
  78. .vinyl, .vinyl svg {
  79. width:var(--Vinyl-Icon-Size);
  80. height:var(--Vinyl-Icon-Size);
  81. }
  82.  
  83. .music-controls {
  84. margin-left:10px;
  85. width:var(--Music-Controls-Size);
  86. overflow:hidden;
  87. cursor:pointer;
  88. }
  89.  
  90. .music-controls svg {
  91. width:var(--Music-Controls-Size);
  92. height:var(--Music-Controls-Size);
  93. color:var(--Music-Controls);
  94. stroke-width:1.5px;
  95. }
  96.  
  97. .pausee {display:none;}
  98.  
  99. .beff {display:none;}
  100. .aff {display:block;}
  101.  
  102. .music-title {
  103. margin-left:8px;
  104. font-family:work sans;
  105. font-size:var(--Music-Title-Font-Size);
  106. color:var(--Music-Title-Color);
  107. }
  108. </style>
  109. <body>
  110. <!-------MUSIC PLAYER BY GLENTHEMES------->
  111. <div class="glenjams-06">
  112. <div class="pasta">
  113. <div class="vinyl"></div>
  114. <div class="music-controls">
  115. <div class="playy"><i data-feather="play"></i></div>
  116. <div class="pausee"><i data-feather="pause"></i></div>
  117. </div>
  118. <div class="music-title">Moonlit Night</div>
  119.  
  120. <audio id="audio" src="https://dl.dropbox.com/s/myqskugtxm9byf4/Moonlit%20Night.mp3" type="audio"></audio>
  121. </div><!--pasta-->
  122. </div><!--glenjams-06-->
  123. <!----end music player---->
  124.  
  125. <script>feather.replace()</script>
  126. </body>
  127.  
RAW Paste Data