Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title></title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <style>
- #singer {
- position: absolute;
- top: 70%;
- left: 50%;
- transform: translate(-50%);
- text-align: center;
- font-family: arial;
- font-style: bold;
- font-size: 20px;
- }
- a {
- text-decoration:none;
- color:white;
- }
- #foo {
- color:white;
- font-size:10vw;
- font-weight:900;
- font-family:arial;
- position:absolute;
- top:50%;
- left:50%;
- transform:translate(-50%,-50%);
- }
- .plus {
- font-size:15vw;
- text-align:center;
- font-weight:900;
- font-family:arial;
- color:white;
- }
- #title {
- font-size:10vw;
- text-align:center;
- font-weight:900;
- font-family:arial;
- color:white;
- }
- body {
- margin:0;
- background-color:black;
- overflow:hidden;
- }
- #box {
- width:80%;
- position:absolute;
- top:45%;
- left:6%;
- height:55px;
- }
- #audio_overlay {
- width:100%;
- height:55px;
- position:absolute;
- top:4vw;
- left:4vw;
- background-color:red;
- border-radius:50px;
- }
- audio {
- border:4vw solid red;
- border-radius:50px;
- outline:none;
- width:100%;
- position:absolute;background-color:red;
- top:0;
- left:0;
- }
- @media all and (min-width:426px){
- body {
- margin:0;
- }
- #overlay {
- z-index:1;
- position:absolute;
- top:0;
- background-color:black;
- width:100%;
- height:100vh;
- }
- #overlay:after {
- content:'Portrait only';
- color:white;
- font-size:10vw;
- font-family:arial;
- font-weight:900;
- position:absolute;
- top:50%;
- left:50%;
- transform:translate(-50%,-50%);
- text-align:center;
- }
- }
- </style>
- </head>
- <body>
- <h1 id='title'><span class='plus'>10s</span> <br/> Audio Player</h1>
- <span id='box'>
- <audio id='audio' controls></audio>
- <div id='audio_overlay'><span id='foo'>Play</span></div>
- </span>
- <h1 id='singer'></h1>
- <div id='overlay'></div>
- <script>
- i = 0;
- x = [
- 'https://awesome-elion-3c1281.netlify.app/1.mp3',
- 'https://awesome-elion-3c1281.netlify.app/2.mp3',
- 'https://awesome-elion-3c1281.netlify.app/3.mp3',
- 'https://awesome-elion-3c1281.netlify.app/4.mp3',
- 'https://awesome-elion-3c1281.netlify.app/5.mp3',
- 'https://awesome-elion-3c1281.netlify.app/6.mp3',
- 'https://awesome-elion-3c1281.netlify.app/7.mp3',
- 'https://awesome-elion-3c1281.netlify.app/8.mp3',
- 'https://awesome-elion-3c1281.netlify.app/9.mp3',
- 'https://awesome-elion-3c1281.netlify.app/10.mp3',
- 'https://awesome-elion-3c1281.netlify.app/11.mp3',
- 'https://awesome-elion-3c1281.netlify.app/12.mp3',
- 'https://awesome-elion-3c1281.netlify.app/13.mp3',
- 'https://awesome-elion-3c1281.netlify.app/14.mp3',
- 'https://awesome-elion-3c1281.netlify.app/15.mp3',
- 'https://awesome-elion-3c1281.netlify.app/16.mp3',
- 'https://awesome-elion-3c1281.netlify.app/17.mp3',
- 'https://awesome-elion-3c1281.netlify.app/18.mp3',
- 'https://awesome-elion-3c1281.netlify.app/19.mp3',
- 'https://awesome-elion-3c1281.netlify.app/20.mp3',
- 'https://awesome-elion-3c1281.netlify.app/21.mp3',
- 'https://awesome-elion-3c1281.netlify.app/22.mp3',
- 'https://awesome-elion-3c1281.netlify.app/23.mp3',
- 'https://awesome-elion-3c1281.netlify.app/24.mp3'
- ];
- link = [
- '<a href="https://www.youtube.com/watch?v=Q5XvLJrW6Fg" target="_blank">See on YouTube <br/> Nat King Cole - Ansiedad </a>',
- '<a href="https://www.youtube.com/watch?v=lgeUItUZjj4" target="_blank">See on YouTube <br/> Gipsy Kings - Baila Me </a>',
- '<a href="https://www.youtube.com/watch?v=jq3UiqjbblU" target="_blank">See on YouTube <br/> Nat King Cole - El bodeguero </a>',
- '<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>',
- '<a href="https://www.youtube.com/watch?v=7cB5VQAAOYk" target="_blank">See on YouTube <br/> Barry Manilow - Copacabana </a>',
- '<a href="https://www.youtube.com/watch?v=UGiB1myCCOU" target="_blank">See on YouTube <br/> Nat King Cole - Fascination </a>',
- '<a href="https://www.youtube.com/watch?v=kkoT1nZOexY" target="_blank">See on YouTube <br/> Blake Shelton - Home </a>',
- '<a href="https://www.youtube.com/watch?v=xZjosn2u1gA" target="_blank">See on YouTube <br/> Blake Shelton - Honey Bee </a>',
- '<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>',
- '<a href="https://www.youtube.com/watch?v=KWjV25q34Hw" target="_blank">See on YouTube <br/> Meduza - Piece Of Your Heart </a>',
- '<a href="https://www.youtube.com/watch?v=iF7kOq0peAU" target="_blank">See on YouTube <br/> Nat King Cole - Unforgettable </a>',
- '<a href="https://www.youtube.com/watch?v=2Ez7veJhZKo" target="_blank">See on YouTube <br/> Soul Ballet - Tuscan Chica </a>',
- '<a href="https://www.youtube.com/watch?v=hHUbLv4ThOo" target="_blank">See on YouTube <br/> Pitbull - Timber ft. Ke$ha </a>',
- '<a href="https://www.youtube.com/watch?v=JxPj3GAYYZ0" target="_blank">See on YouTube <br/> Eric Clapton - Tears In Heaven </a>',
- '<a href="https://www.youtube.com/watch?v=09R8_2nJtjg" target="_blank">See on YouTube <br/> Maroon 5 - Sugar </a>',
- '<a href="https://www.youtube.com/watch?v=ZWYd8speTBs" target="_blank">See on YouTube <br/> Gary Moore - Still Got The Blues </a>',
- '<a href="https://www.youtube.com/watch?v=Utgw2vguhbM&t=4s" target="_blank">See on YouTube <br/> Soul Ballet - Blue Girl </a>',
- '<a href="https://www.youtube.com/watch?v=iSocbXVk4mM" target="_blank">See on YouTube <br/> Soul Ballet - Am I close enough </a>',
- '<a href="https://www.youtube.com/watch?v=qmbx4_TQbkA" target="_blank">See on YouTube <br/> Gipsy Kings - Volare </a>',
- '<a href="https://www.youtube.com/watch?v=3AtDnEC4zak" target="_blank">See on YouTube <br/> Charlie Puth - We Don´t Talk Anymore </a>',
- '<a href="https://www.youtube.com/watch?v=GfAb0gNPy6s" target="_blank">See on YouTube <br/> Nat King Cole - When I Fall in Love </a>',
- '<a href="https://www.youtube.com/watch?v=L-5M1_DKvb0" target="_blank">See on YouTube <br/> Santana - While My Guitar Gently Weeps </a>',
- '<a href="https://www.youtube.com/watch?v=xl7Hd2r0LOs" target="_blank">See on YouTube <br/> Wonderful tonight - Eric Clapton </a>',
- '<a href="https://www.youtube.com/watch?v=nADTbWQof7Y" target="_blank">See on YouTube <br/> Josh Turner - Your Man </a>'
- ];
- audio.src = x[i];
- audio.currentTime=10;
- audio.ontimeupdate=()=>{
- if(audio.currentTime > 20){
- i++;
- audio.src = x[i];
- audio.currentTime = 10;
- audio.play();
- singer.innerHTML = link[i];
- if(i == x.length){
- i=0;
- audio.src = x[i];
- audio.currentTime = 10;
- audio.play();
- singer.innerHTML = link[i];
- }
- }
- }
- audio_overlay.onclick=()=>{
- audio.style.zIndex = '1';
- audio.play();
- singer.innerHTML = link[i];
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement