Advertisement
powys

ramdons music player (cr ramdons)

Jun 4th, 2021
15,908
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.36 KB | None | 1 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. </head>
  4.  
  5. <style>
  6. #musicplayer{
  7. display:grid;
  8. grid-template-columns:20px auto;
  9. align-items:center;
  10. width: 200px;
  11.  
  12. font-size:20px;
  13. line-height:140%;
  14.  
  15. background:white;
  16.  
  17. border: 1px solid black;
  18.  
  19. }
  20.  
  21. #musictitle{
  22. overflow: hidden;
  23. white-space: nowrap;
  24. display:inline-block;
  25. width: calc(100% - 10px - 1px);
  26. margin-left: calc(10px + 1px);
  27. }
  28.  
  29. #musicpixel{
  30. width:100%;
  31. padding:5px;
  32. position:relative;
  33.  
  34. min-height: 20px;
  35.  
  36. background:white;
  37.  
  38. border-right: 1px solid black;
  39. }
  40.  
  41.  
  42. .overlay {
  43. opacity:0;
  44. position:absolute;
  45. top:0;
  46. left:0;
  47. text-align:center;
  48. width:100%;
  49. height:100%;
  50. transition:0.3s ease;
  51.  
  52. background:white;
  53. }
  54.  
  55. #musicplayer:hover .overlay {
  56. opacity: 1;
  57. transition:0.3s ease;
  58. }
  59.  
  60. .playpause{
  61. position: absolute;
  62. top: 50%;
  63. left: 50%;
  64. transform: translate(-50%, -50%);
  65. }
  66.  
  67. .playpause:hover{
  68. cursor:help;
  69. }
  70.  
  71. #musicpixel img{
  72. display:block;
  73. }
  74.  
  75. .marquee{
  76. display: inline-block;
  77. padding-left: 100%;
  78. animation: marquee 5s linear infinite;
  79. }
  80.  
  81. @keyframes marquee{
  82. 0% {
  83. transform: translate(0, 0);
  84. }
  85. 100% {
  86. transform: translate(-100%, 0);
  87. }
  88. }
  89.  
  90. </style>
  91.  
  92. <div id='musicplayer'>
  93. <div id='musicpixel'>
  94. <img src='https://64.media.tumblr.com/4b8b5edeb93a938b40814b1dd867833c/tumblr_inline_msbtvcHwwB1rkldve.gif'>
  95. <div class='overlay'>
  96. <div class='playpause'><i class="fas fa-play"></i></div>
  97. </div>
  98. </div>
  99. <div id='musictitle'>
  100. <span class='marquee'>windy summer cr ramdons</span>
  101. </div>
  102. </div>
  103.  
  104. <audio id='musicsrc' loop src='https://dl.dropbox.com/s/66c6ocz8rniwpqm/Anri%20-%20Windy%20Summer.mp3'></audio>
  105.  
  106.  
  107.  
  108.  
  109. <script>
  110. document.querySelector('.playpause').addEventListener('click', playpause);
  111.  
  112. function playpause(){
  113. if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
  114. document.querySelector('#musicsrc').play();
  115. document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
  116. } else{
  117. document.querySelector('#musicsrc').pause();
  118. document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
  119. }
  120.  
  121. }
  122. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement