peachygirl

2000's music player

Jan 7th, 2022 (edited)
6,832
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.46 KB | None | 0 0
  1. <head>
  2. <link rel="preconnect" href="https://fonts.googleapis.com">
  3. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  4. <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap" rel="stylesheet">
  5.  
  6. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  7.  
  8. <!-------MUSIC PLAYER BY GLENTHEMES------->
  9. <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  10.  
  11. <script src="https://kit.fontawesome.com/8119dfca45.js" crossorigin="anonymous"></script>
  12.  
  13. </head>
  14.  
  15. <style type="text/css">
  16.  
  17. @font-face {
  18. font-family: 'music';
  19. src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/LL_RECOR.TTF);
  20. }
  21.  
  22. @font-face {
  23. font-family: Pixelated MS Sans Serif;
  24. src:url(ms_sans_serif.woff) format("woff");
  25. src:url(ms_sans_serif.woff2) format("woff2");
  26. }
  27.  
  28. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  29. #glenplayer02 {
  30. position:relative;
  31. display:flex;
  32. background: #C2C2C2;
  33. padding: .2em;
  34. border: 3px solid;
  35. border-style: inset;
  36. margin: auto;
  37. margin-top: 0.5em;
  38. margin-bottom: 0.5em;
  39. width:auto;
  40. }
  41.  
  42. #glenplayer02 a {text-decoration:none;}
  43.  
  44. #glenplayer02 > div {
  45. align-self:center;
  46. -webkit-align-self:center;
  47. }
  48.  
  49. .music-controls {
  50. user-select:none;
  51. -webkit-user-select:none;
  52. width:13px;
  53. font-size:18px;
  54. cursor:pointer;
  55. font-family: 'music';
  56. }
  57.  
  58. .playy, .pausee {font-family: 'music'; font-size: 1.1em; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; } /* color of play & pause buttons */
  59.  
  60. .pausee {display:none;}
  61.  
  62. .sonata {
  63. margin-left:0.4em;
  64. font-family: Pixelated MS Sans Serif;
  65. font-size:0.75em;
  66. color:#000; /* color of music note symbol */
  67. }
  68.  
  69. .labeltext {
  70. margin-left:0.5em;
  71. position: relative;
  72. bottom:0.1em;
  73. font-size:14px;/* color of song title */
  74. }
  75.  
  76. </style>
  77. <body>
  78. <!-------MUSIC PLAYER BY GLENTHEMES------->
  79. <div id="glenplayer02">
  80. <div class="music-controls" onclick="songstart();">
  81. <div class="playy">d</div>
  82. <div class="pausee">k</div>
  83. </div>
  84. <div class="sonata">MP3 </div>
  85. <div class="labeltext"><img src="https://64.media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"> <span style="font-family: 'music'; font-size: 1.1em; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; ">o</span></div>
  86. </div><!--end music player-->
  87.  
  88. <audio id="tune" src="https://drive.google.com/uc?export=download&id=1_NHDLb9goEYZk8G7uWKY812j2JNqgpMu"></audio>
  89. </body>
  90.  
  91.  
  92.  
Comments
Add Comment
Please, Sign In to add comment