Advertisement
dianakko

music player hoyeon.ju.mp (randoms cambiado)

Oct 20th, 2021
277
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.67 KB | None | 0 0
  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. <link rel="preconnect" href="https://fonts.googleapis.com">
  4. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  5. <link href="https://fonts.googleapis.com/css2?family=Mali:wght@300&display=swap" rel="stylesheet">
  6.  
  7. </head>
  8.  
  9.  
  10. <style>
  11. #musicplayer{
  12. display:grid;
  13. grid-template-columns:20px auto;
  14. align-items:center;
  15. width: 120px;
  16. font-family: 'Mali', cursive;
  17. color: #f28eb9;
  18. font-size:12px;
  19. line-height:140%;
  20. border-radius: 14px;
  21. background:#ffeff6;
  22.  
  23. border: 4px double #fff;
  24.  
  25. }
  26.  
  27. #musictitle{
  28. overflow: hidden;
  29. white-space: nowrap;
  30. display:inline-block;
  31. width: calc(100% - 10px - 1px);
  32. margin-left: calc(10px + 1px);
  33. }
  34.  
  35. #musicpixel{
  36. width:100%;
  37. padding:5px;
  38. position:relative;
  39. border-radius: 14px;
  40. min-height: 20px;
  41. background:#ffeff6;
  42.  
  43. }
  44.  
  45.  
  46. .overlay {
  47. opacity:0;
  48. position:absolute;
  49. top:0;
  50. left:0;
  51. text-align:center;
  52. width:100%;
  53. height:100%;
  54. transition:0.3s ease;
  55. border-radius: 14px;
  56. background:#ffeff6;
  57. }
  58.  
  59. #musicplayer:hover .overlay {
  60. opacity: 1;
  61. transition:0.3s ease;
  62. }
  63.  
  64. .playpause{
  65. position: absolute;
  66. color: black;
  67. top: 50%;
  68. left: 50%;
  69. transform: translate(-50%, -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 5s 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://64.media.tumblr.com/4b8b5edeb93a938b40814b1dd867833c/tumblr_inline_msbtvcHwwB1rkldve.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'>windy summer cr ramdons</span>
  106. </div>
  107. </div>
  108.  
  109. <audio id='musicsrc' loop src='https://dl.dropbox.com/s/66c6ocz8rniwpqm/Anri%20-%20Windy%20Summer.mp3'></audio>
  110.  
  111.  
  112.  
  113.  
  114. <script>
  115. document.querySelector('.playpause').addEventListener('click', playpause);
  116.  
  117. function playpause(){
  118. if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
  119. document.querySelector('#musicsrc').play();
  120. document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  121. } else{
  122. document.querySelector('#musicsrc').pause();
  123. document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  124. }
  125.  
  126. }
  127. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement