Advertisement
1xptolevitico69

Mobile ( orientation:portrait )

Jul 14th, 2020
1,288
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.60 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width">
  7. <style>
  8.  
  9. #singer {
  10.   position: absolute;
  11.   top: 70%;
  12.   left: 50%;
  13.   transform: translate(-50%);
  14.   text-align: center;
  15.   font-family: arial;
  16.   font-style: bold;
  17.   font-size: 20px;
  18. }
  19.  
  20. a {
  21. text-decoration:none;
  22. color:white;
  23. }
  24.  
  25. #foo {
  26. color:white;
  27. font-size:10vw;
  28. font-weight:900;
  29. font-family:arial;
  30. position:absolute;
  31. top:50%;
  32. left:50%;
  33. transform:translate(-50%,-50%);
  34. }
  35.  
  36. .plus {
  37. font-size:15vw;
  38. text-align:center;
  39. font-weight:900;
  40. font-family:arial;
  41. color:white;
  42. }
  43.  
  44. #title {
  45. font-size:10vw;
  46. text-align:center;
  47. font-weight:900;
  48. font-family:arial;
  49. color:white;
  50. }
  51.  
  52. body {
  53. margin:0;
  54. background-color:black;
  55. overflow:hidden;
  56. }
  57.  
  58. #box {
  59. width:80%;
  60. position:absolute;
  61. top:45%;
  62. left:6%;
  63. height:55px;
  64. }
  65.  
  66. #audio_overlay {
  67. width:100%;
  68. height:55px;
  69. position:absolute;
  70. top:4vw;
  71. left:4vw;
  72. background-color:red;
  73. border-radius:50px;
  74. }
  75.  
  76. audio {
  77. border:4vw solid red;
  78. border-radius:50px;
  79. outline:none;
  80. width:100%;
  81. position:absolute;background-color:red;
  82. top:0;
  83. left:0;
  84. }
  85.  
  86.  
  87. @media all and (min-width:426px){
  88. body {
  89. margin:0;
  90. }
  91.  
  92. #overlay {
  93. z-index:1;
  94. position:absolute;
  95. top:0;
  96. background-color:black;
  97. width:100%;
  98. height:100vh;
  99. }
  100.  
  101. #overlay:after {
  102. content:'Portrait only';
  103. color:white;
  104. font-size:10vw;
  105. font-family:arial;
  106. font-weight:900;
  107. position:absolute;
  108. top:50%;
  109. left:50%;
  110. transform:translate(-50%,-50%);
  111. text-align:center;
  112. }
  113. }
  114.  
  115.  
  116. </style>
  117. </head>
  118. <body>
  119.  
  120. <h1 id='title'><span class='plus'>10s</span> <br/> Audio Player</h1>
  121.  
  122. <span id='box'>
  123. <audio id='audio' controls></audio>
  124. <div id='audio_overlay'><span id='foo'>Play</span></div>
  125. </span>
  126.  
  127. <h1 id='singer'></h1>
  128.  
  129. <div id='overlay'></div>
  130.  
  131.  
  132.  
  133. <script>
  134. i = 0;
  135.  
  136. x = [
  137. 'https://awesome-elion-3c1281.netlify.app/1.mp3',
  138. 'https://awesome-elion-3c1281.netlify.app/2.mp3',
  139. 'https://awesome-elion-3c1281.netlify.app/3.mp3',
  140. 'https://awesome-elion-3c1281.netlify.app/4.mp3',
  141. 'https://awesome-elion-3c1281.netlify.app/5.mp3',
  142. 'https://awesome-elion-3c1281.netlify.app/6.mp3',
  143. 'https://awesome-elion-3c1281.netlify.app/7.mp3',
  144. 'https://awesome-elion-3c1281.netlify.app/8.mp3',
  145. 'https://awesome-elion-3c1281.netlify.app/9.mp3',
  146. 'https://awesome-elion-3c1281.netlify.app/10.mp3',
  147. 'https://awesome-elion-3c1281.netlify.app/11.mp3',
  148. 'https://awesome-elion-3c1281.netlify.app/12.mp3',
  149. 'https://awesome-elion-3c1281.netlify.app/13.mp3',
  150. 'https://awesome-elion-3c1281.netlify.app/14.mp3',
  151. 'https://awesome-elion-3c1281.netlify.app/15.mp3',
  152. 'https://awesome-elion-3c1281.netlify.app/16.mp3',
  153. 'https://awesome-elion-3c1281.netlify.app/17.mp3',
  154. 'https://awesome-elion-3c1281.netlify.app/18.mp3',
  155. 'https://awesome-elion-3c1281.netlify.app/19.mp3',
  156. 'https://awesome-elion-3c1281.netlify.app/20.mp3',
  157. 'https://awesome-elion-3c1281.netlify.app/21.mp3',
  158. 'https://awesome-elion-3c1281.netlify.app/22.mp3',
  159. 'https://awesome-elion-3c1281.netlify.app/23.mp3',
  160. 'https://awesome-elion-3c1281.netlify.app/24.mp3'
  161. ];
  162.  
  163.  
  164.  
  165. link = [
  166.   '<a href="https://www.youtube.com/watch?v=Q5XvLJrW6Fg" target="_blank">See on YouTube <br/> Nat King Cole - Ansiedad </a>',
  167.   '<a href="https://www.youtube.com/watch?v=lgeUItUZjj4" target="_blank">See on YouTube <br/> Gipsy Kings - Baila Me </a>',
  168.   '<a href="https://www.youtube.com/watch?v=jq3UiqjbblU" target="_blank">See on YouTube <br/> Nat King Cole - El bodeguero </a>',
  169.   '<a href="https://www.youtube.com/watch?v=3V_7-7myPxM" target="_blank">See on YouTube <br/> Barry Manilow - Can´t Smile Without You </a>',
  170.   '<a href="https://www.youtube.com/watch?v=7cB5VQAAOYk" target="_blank">See on YouTube <br/> Barry Manilow - Copacabana </a>',
  171.   '<a href="https://www.youtube.com/watch?v=UGiB1myCCOU" target="_blank">See on YouTube <br/> Nat King Cole - Fascination </a>',
  172.   '<a href="https://www.youtube.com/watch?v=kkoT1nZOexY" target="_blank">See on YouTube <br/> Blake Shelton - Home </a>',
  173.   '<a href="https://www.youtube.com/watch?v=xZjosn2u1gA" target="_blank">See on YouTube <br/> Blake Shelton - Honey Bee </a>',
  174.   '<a href="https://www.youtube.com/watch?v=jVEb-BWpo8U" target="_blank">See on YouTube <br/> Barry Manilow - It Never Rains In Southern California </a>',
  175.   '<a href="https://www.youtube.com/watch?v=KWjV25q34Hw" target="_blank">See on YouTube <br/> Meduza - Piece Of Your Heart </a>',
  176.   '<a href="https://www.youtube.com/watch?v=iF7kOq0peAU" target="_blank">See on YouTube <br/> Nat King Cole - Unforgettable </a>',
  177.   '<a href="https://www.youtube.com/watch?v=2Ez7veJhZKo" target="_blank">See on YouTube <br/> Soul Ballet - Tuscan Chica </a>',
  178.   '<a href="https://www.youtube.com/watch?v=hHUbLv4ThOo" target="_blank">See on YouTube <br/> Pitbull - Timber ft. Ke$ha </a>',
  179.   '<a href="https://www.youtube.com/watch?v=JxPj3GAYYZ0" target="_blank">See on YouTube <br/> Eric Clapton - Tears In Heaven </a>',
  180.   '<a href="https://www.youtube.com/watch?v=09R8_2nJtjg" target="_blank">See on YouTube <br/> Maroon 5 - Sugar </a>',
  181.   '<a href="https://www.youtube.com/watch?v=ZWYd8speTBs" target="_blank">See on YouTube <br/> Gary Moore - Still Got The Blues </a>',
  182.   '<a href="https://www.youtube.com/watch?v=Utgw2vguhbM&t=4s" target="_blank">See on YouTube <br/> Soul Ballet - Blue Girl </a>',
  183.   '<a href="https://www.youtube.com/watch?v=iSocbXVk4mM" target="_blank">See on YouTube <br/> Soul Ballet - Am I close enough </a>',
  184.   '<a href="https://www.youtube.com/watch?v=qmbx4_TQbkA" target="_blank">See on YouTube <br/> Gipsy Kings - Volare </a>',
  185.   '<a href="https://www.youtube.com/watch?v=3AtDnEC4zak" target="_blank">See on YouTube <br/> Charlie Puth - We Don´t Talk Anymore </a>',
  186.   '<a href="https://www.youtube.com/watch?v=GfAb0gNPy6s" target="_blank">See on YouTube <br/> Nat King Cole - When I Fall in Love </a>',
  187.   '<a href="https://www.youtube.com/watch?v=L-5M1_DKvb0" target="_blank">See on YouTube <br/> Santana - While My Guitar Gently Weeps </a>',
  188.   '<a href="https://www.youtube.com/watch?v=xl7Hd2r0LOs" target="_blank">See on YouTube <br/> Wonderful tonight - Eric Clapton </a>',
  189.   '<a href="https://www.youtube.com/watch?v=nADTbWQof7Y" target="_blank">See on YouTube <br/> Josh Turner - Your Man </a>'
  190. ];
  191.  
  192.  
  193.  
  194.  
  195.  
  196. audio.src = x[i];
  197. audio.currentTime=10;
  198.  
  199.  
  200.  
  201. audio.ontimeupdate=()=>{
  202. if(audio.currentTime > 20){
  203. i++;
  204. audio.src = x[i];
  205. audio.currentTime = 10;
  206. audio.play();
  207. singer.innerHTML = link[i];
  208. if(i == x.length){
  209. i=0;
  210. audio.src = x[i];
  211. audio.currentTime = 10;
  212. audio.play();
  213. singer.innerHTML = link[i];
  214. }
  215. }
  216. }
  217.  
  218. audio_overlay.onclick=()=>{
  219. audio.style.zIndex = '1';
  220. audio.play();
  221. singer.innerHTML = link[i];
  222. }
  223.  
  224. </script>
  225. </body>
  226. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement