Advertisement
valentinegirl

hoyeon ju mp music player

Mar 23rd, 2022
1,442
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.80 KB | None | 0 0
  1. <!-- ive left stuff blank so make sure to fill in each of ur hex codes colors as well as the pixel and song link, after all of that this music player will work!! -->
  2.  
  3. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  4. <link rel="preconnect" href="https://fonts.googleapis.com">
  5. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  6. <link href="https://fonts.googleapis.com/css2?family=Mali&display=swap" rel="stylesheet">
  7.  
  8. <style>
  9.  
  10. #musicplayer {
  11. left: 1em;
  12. bottom: -2.25em;
  13. display:grid;
  14. grid-template-columns:20px auto;
  15. align-items:center;
  16. width: 6.875em;
  17. height: 2em;
  18. line-height:140%;
  19. background:#color;
  20. border: 4px double #color;
  21. border-radius: 0.875em;
  22. }
  23.  
  24. #musicplayer > div {
  25. border-radius: 0.875em;
  26. }
  27.  
  28. #musictitle{
  29. overflow: hidden;
  30. white-space: nowrap;
  31. display:inline-block;
  32. width: calc(100% - 10px - 1px);
  33. margin-left: calc(10px + 1px);
  34. }
  35.  
  36. #musicpixel {
  37. width:100%;
  38. position:relative;
  39. min-height: 20px;
  40. background:#color;
  41. padding-left: 5px;
  42. opacity: 1;
  43. }
  44.  
  45. .overlay {
  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:#color;
  55. border-radius: 0.875em;
  56. }
  57.  
  58. #musicplayer:hover .overlay {
  59. opacity: 1;
  60. transition:0.3s ease;
  61. }
  62.  
  63. #musicplayer:hover #pixel {
  64. opacity: 0;
  65. transition:0.3s ease;
  66. }
  67.  
  68. .playpause{
  69. position: absolute;
  70. top: 50%;
  71. left: 50%;
  72. transform: translate(-50%, -50%);
  73. margin-left: 5px;
  74. }
  75.  
  76. .playpause:hover{
  77. cursor:help;
  78. }
  79.  
  80. #musicpixel img{
  81. display:block;
  82. }
  83.  
  84. .marquee {
  85. display: inline-block;
  86. padding-left: 100%;
  87. animation: marquee 3s linear infinite;
  88. font-size:1em;
  89. font-family: mali;
  90. font-weight: 500;
  91. font-size: 9.5px;
  92. color: #textcolor;
  93. }
  94.  
  95. @keyframes marquee {
  96. 0% {
  97. transform: translate(0, 0);
  98. }
  99.  
  100. 50% {
  101. transform: translate(-50%, 0);
  102. }
  103. 100% {
  104. transform: translate(-125%, 0);
  105. }
  106.  
  107. </style>
  108. </div>
  109.  
  110. <div id='musicplayer' style="position:absolute">
  111.  
  112. <div id='musicpixel'>
  113.  
  114. <img src='LINK' id='pixel'>
  115. <div class='overlay'>
  116. <div class='playpause'><i class="fas fa-play"></i></div>
  117. </div>
  118. </div>
  119. <div id='musictitle'>
  120. <span class='marquee'>song name by artist</span>
  121. </div>
  122. </script>
  123.  
  124. <audio id='musicsrc' loop src='LINK'></audio>
  125.  
  126. <script>
  127.  
  128. document.querySelector('.playpause').addEventListener('click', playpause);
  129. function playpause(){if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
  130. document.querySelector('#musicsrc').play();
  131. document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  132. } else{
  133. document.querySelector('#musicsrc').pause();
  134. document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  135. }
  136. }
  137. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement