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>
- .bt {
- box-sizing:border-box;
- width:180px;
- height:180px;
- border-radius:50%;
- outline:none;
- background-color:red;
- color:white;
- font-size:30px;
- font-family:arial;
- font-weight:900;
- border:20px solid white;
- cursor:pointer;
- }
- .bt_container {
- border:1px solid;
- width:180px;
- height:180px;
- border-radius:50%;
- display:block;
- position:absolute;
- top:50%;
- left:50%;
- transform:translate(-50%,-50%);
- }
- #box {
- width:60%;
- position:absolute;
- top:30%;
- left:50%;
- transform:translate(-50%,-30%);
- }
- audio {
- width:100%;
- position:absolute;
- outline:none;
- background-color:rgba(128,128,128,0.1);
- }
- img {
- width:100%;
- display:block;
- }
- #outer {
- z-index:-1;
- border:20px solid white;
- width:140px;
- height:140px;
- border-radius:50%;
- display:inline-block;
- position:absolute;
- top:0;
- left:0;
- background-color:red;
- cursor:pointer;
- }
- .sp {
- border:10px solid white;
- display:inline-block;
- margin:20px;
- border-radius:50%;
- }
- @keyframes jolie {
- 100% { transform:rotate(360deg); }
- }
- </style>
- </head>
- <body>
- <div id='box'>
- <img id='image' src='https://neanderthal-emergen.000webhostapp.com/image.png'/>
- <span class='bt_container'>
- <button class='bt' onclick='play()'>Play</button>
- <span onclick='stop()' id='outer'><span class='sp'></span></span>
- </span>
- </div>
- <script>
- i=1;
- audio=document.createElement('audio');
- box.appendChild(audio);
- function play(){
- x = setInterval(function(){
- i++;
- },1000);
- audio.src='https://neanderthal-emergen.000webhostapp.com/Bossa Nova.mp3';
- audio.controls=true;
- audio.play();
- audio.currentTime=i;
- outer.style.zIndex='1';
- outer.style.animation='jolie 6s linear infinite';
- audio.ontimeupdate=function(){
- i=audio.currentTime;
- if(audio.currentTime >= audio.duration){
- outer.style.zIndex='-1';
- outer.style.animation='';
- audio.controls=false;
- clearInterval(x);
- i=1;
- }
- }
- }
- function stop(){
- audio.pause();
- clearInterval(x);
- audio.currentTime=i;
- outer.style.zIndex='-1';
- outer.style.animation='';
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement