CreateElement ( audio ). Animation onclick. Audio ontimeupda

<!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>