dracslaura

draggable music player

Oct 14th, 2021
621
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <head>
  2. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  3. </head>
  4.  
  5. <style>
  6. img:hover {
  7. filter: saturate(0%);
  8. cursor:help;
  9. }
  10.  
  11. #musicplayer{
  12. display:grid;
  13. grid-template-columns:30px auto;
  14. align-items:center;
  15. width: 200px;
  16. color: #FF77AD;
  17. font-size:20px;
  18. line-height:140%;
  19. background: #940000;
  20. border: 1px solid #ff77ad;
  21. filter: drop-shadow(0px 1px #00000030) drop-shadow(0 -1px #00000030) drop-shadow(1px 0 #00000030) drop-shadow(-1px 0 #00000030);
  22.  
  23. }
  24.  
  25. #musictitle{
  26. font-weight: bold;
  27. font-family:times;
  28. -webkit-text-stroke: 1px white;
  29. background: #940000;
  30. overflow: hidden;
  31. white-space: nowrap;
  32. display:inline-block;
  33. width: calc(100% - 10px - 1px);
  34. margin-left: calc(10px + 1px);
  35. }
  36.  
  37. #musicpixel{
  38. width:100%;
  39. padding:5px;
  40. position:relative;
  41. min-height: 20px;
  42. min-width: 20px;
  43. background: #940000;
  44. border-right: 1px solid #ff77ad;
  45. }
  46.  
  47. .overlay {
  48. opacity:0;
  49. position:absolute;
  50. top:0;
  51. left:0;
  52. text-align:center;
  53. width:100%;
  54. height:100%;
  55. transition:0.3s ease;
  56.  
  57. background: #940000;
  58. }
  59.  
  60. #musicplayer:hover .overlay {
  61. opacity: 1;
  62. transition:0.3s ease;
  63. }
  64.  
  65. .playpause{
  66. position: absolute;
  67. top: 50%;
  68. left: 50%;
  69. transform: translate(-40%, -50%);
  70. }
  71.  
  72. .playpause:hover{
  73. cursor:help;
  74. }
  75.  
  76. #musicpixel img{
  77. display:block;
  78. }
  79.  
  80. .marquee{
  81. display: inline-block;
  82. padding-left: 100%;
  83. animation: marquee 8s linear infinite;
  84. }
  85.  
  86. @keyframes marquee{
  87. 0% {
  88. transform: translate(0, 0);
  89. }
  90. 100% {
  91. transform: translate(-100%, 0);
  92. }
  93. }
  94.  
  95. </style>
  96.  
  97. <div id='musicplayer'>
  98. <div id='musicpixel'>
  99. <img src='https://cdn.discordapp.com/attachments/804937299702841415/897999803869450240/8341c674.gif'>
  100. <div class='overlay'>
  101. <div class='playpause'><i class="fas fa-play"></i></div>
  102. </div>
  103. </div>
  104. <div id='musictitle'>
  105. <span class='marquee'>draggable on pc! now playing . . . let's get lost by kittib . . .</span>
  106. </div>
  107. </div>
  108.  
  109. <audio id='musicsrc' loop src='https://dl.dropbox.com/s/7trw2tf8i2fs1t5/Let%27s%20Get%20Lost.mp3'></audio>
  110.  
  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.  
  126. <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  127. <link rel="stylesheet" href="/resources/demos/style.css">
  128. <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  129. <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  130. <script>
  131. $( function() {
  132. $( "#musicplayer" ).draggable();
  133. } );
  134. </script>
RAW Paste Data