Advertisement
Guest User

wjsn.uwu.ai music player

a guest
Oct 25th, 2021
2,120
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.97 KB | None | 0 0
  1. <link rel="preconnect" href="https://fonts.googleapis.com">
  2. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  3. <link href="https://fonts.googleapis.com/css2?family=Mali&amp;display=swap" rel="stylesheet">
  4. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  5. <style>
  6. #erm {
  7. position: absolute;
  8. bottom: 10px;
  9. left: 40px;
  10. right: 12px;
  11. z-index: 999;
  12. }
  13.  
  14. #musicplayer {
  15. display: grid;
  16. grid-template-columns: 30px auto;
  17. align-items: center;
  18. width: 100px;
  19. font-size: 20px;
  20. line-height: 140%;
  21. border-radius: 10px;
  22. background: white;
  23. border: 1px solid black;
  24. }
  25.  
  26. #musictitle {
  27. overflow: hidden;
  28. white-space: nowrap;
  29. display: inline-block;
  30. width: calc(100% - 15px - 1px);
  31. margin-left: calc(5px + 1px);
  32. }
  33.  
  34. #musicpixel {
  35. width: 100%;
  36. padding: 5px;
  37. position: relative;
  38. min-height: 10px;
  39. background: white;
  40. border-radius: 10px 0 0 10px;
  41. border-right: 1px solid black;
  42. }
  43.  
  44. .overlay {
  45. border-radius: 10px 0 0 10px;
  46. opacity: 0;
  47. position: absolute;
  48. top: 0;
  49. left: 0;
  50. text-align: center;
  51. width: 100%;
  52. height: 100%;
  53. transition: 0.3s ease;
  54. background: white;
  55. }
  56.  
  57. #musicplayer:hover .overlay {
  58. opacity: 1;
  59. transition: 0.3s ease;
  60. }
  61.  
  62. .playpause {
  63. position: absolute;
  64. top: 50%;
  65. left: 50%;
  66. transform: translate(-50%, -50%);
  67. }
  68.  
  69. .playpause:hover {
  70. cursor: help;
  71. }
  72.  
  73. #musicpixel img {
  74. display: block;
  75. }
  76.  
  77. .marquee {
  78. font-size: 0.8em;
  79. font-family: 'Mali', cursive;
  80. display: inline-block;
  81. padding-left: 100%;
  82. animation: marquee 8s linear infinite;
  83. }
  84.  
  85. @keyframes marquee {
  86. 0% {
  87. transform: translate(0, 0);
  88. }
  89.  
  90. 100% {
  91. transform: translate(-100%, 0);
  92. }
  93. }
  94. </style>
  95. <div id="erm">
  96. <div id="musicplayer">
  97. <div id="musicpixel">
  98. <img src="https://gnome.crd.co/assets/images/foodsb/75e696bb.gif?v=130b639d">
  99. <div class="overlay">
  100. <div class="playpause">
  101. <i class="fas fa-play"></i>
  102. </div>
  103. </div>
  104. </div>
  105. <div id="musictitle">
  106. <span class="marquee">draggable on pc ~ now playing . . . um um um by nasom</span>
  107. </div>
  108. </div>
  109. <audio id="musicsrc" loop="" src="https://dl.dropbox.com/s/hhh7pblbwt1ki8j/%C3%AB%C2%8A%C2%90%C3%AB%C2%82%C2%8C%C3%AC%C2%9D%C2%B4%20Um%20Um%20Um.mp3"></audio>
  110. </div>
  111. <script>
  112. document.querySelector('.playpause').addEventListener('click', playpause);
  113.  
  114. function playpause() {
  115. if (document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>') {
  116. document.querySelector('#musicsrc').play();
  117. document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  118. } else {
  119. document.querySelector('#musicsrc').pause();
  120. document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  121. }
  122.  
  123. }
  124. </script>
  125. <script>
  126. //Make the DIV element draggagle:
  127. dragElement(document.getElementById("erm"));
  128.  
  129. function dragElement(elmnt) {
  130. var pos1 = 0
  131. , pos2 = 0
  132. , pos3 = 0
  133. , pos4 = 0;
  134. if (document.getElementById(elmnt.id + "musicplayer")) {
  135. /* if present, the header is where you move the DIV from:*/
  136. document.getElementById(elmnt.id + "musicplayer").onmousedown = dragMouseDown;
  137. } else {
  138. /* otherwise, move the DIV from anywhere inside the DIV:*/
  139. elmnt.onmousedown = dragMouseDown;
  140. }
  141.  
  142. function dragMouseDown(e) {
  143. e = e || window.event;
  144. e.preventDefault();
  145. // get the mouse cursor position at startup:
  146. pos3 = e.clientX;
  147. pos4 = e.clientY;
  148. document.onmouseup = closeDragElement;
  149. // call a function whenever the cursor moves:
  150. document.onmousemove = elementDrag;
  151. }
  152.  
  153. function elementDrag(e) {
  154. e = e || window.event;
  155. e.preventDefault();
  156. // calculate the new cursor position:
  157. pos1 = pos3 - e.clientX;
  158. pos2 = pos4 - e.clientY;
  159. pos3 = e.clientX;
  160. pos4 = e.clientY;
  161. // set the element's new position:
  162. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  163. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  164. }
  165.  
  166. function closeDragElement() {
  167. /* stop moving when mouse button is released:*/
  168. document.onmouseup = null;
  169. document.onmousemove = null;
  170. }
  171. }
  172. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement