请问怎么解决chorme浏览器，当点击进度条是出现瞬间消失的兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义播放器</title>
<style type="text/css">
.outContainer{
width:500px;
height:400px;
border-top:2px solid #a6a18d;
border-bottom:2px solid #a6a18d;
border-left:1px solid #b9b7ad;
border-right:1px solid #b6b4a9;
margin:0 auto;
border-radius:8px;
overflow:hidden;
}
.inContainer{
width:498px;
height:396px;
border-top:2px solid #d4c4b4;
border-bottom:2px solid #d4c4b4;
border-left:1px solid #a6a18d;
border-right:1px solid #a6a18d;
}
.cover{
width:100%;
height:198px;
border-bottom:2px solid #787463;
background:url("pic/fmt01.jpg");
overflow: hidden;
margin:0 auto;
}
.progress{
width:496px;
height:46px;
border-top:2px solid #f9f7ee;
border-bottom:2px solid #a29d8a;
border-left:1px solid #cfcdb7;
border-right:1px solid #cfcdb7;
background:#e3ddb8;
position: relative;
}
.progressLine{
position:absolute;
width:438px;
left:50%;
margin-left:-217px;
top:50%;
margin-top:-9px;
height:18px;
background: url("musicimage/progressbg.jpg") repeat-x;
}
.realTimePro{
width:0;
height:12px;
background:url("musicimage/green_bg.png") repeat-x;
margin-top:2px;
position: absolute;
left:50%;
margin-left:-223px;
border-radius: 6px;
}
.progressLineLeft{
position:absolute;
width:7px;
left:50%;
margin-left:-224px;
top:50%;
margin-top:-9px;
height:18px;
background: url("musicimage/leftNode.jpg");
}
.progressLineRight{
position:absolute;
width:7px;
right:50%;
margin-right:-224px;
top:50%;
margin-top:-9px;
height:18px;
background: url("musicimage/rightNode.jpg");
}
.control{
width:496px;
height:152px;
border-left:1px solid #d2d0c6;
border-right:1px solid #d2d0c6;
background:url("musicimage/bottomBg.jpg") repeat-x;
position: relative;
}
.previous{
width:75px;
height:74px;
position: absolute;
left:102px;
background:url("musicimage/lastBg.png");
top:40px;
cursor: pointer;
}
.isPlayPause{
width:95px;
height:94px;
position: absolute;
left:197px;
background:url("musicimage/playNode.png");
top:30px;
cursor: pointer;
}
.next{
width:75px;
height:74px;
position: absolute;
left:312px;
background:url("musicimage/rightbg.png");
top:40px;
cursor: pointer;
}
.noMulted{
position: absolute;
top:58px;
width:37px;
height:32px;
background:url("musicimage/volume.png");
left:427px;
cursor: pointer;
}
.multed{
position: absolute;
top:58px;
width:37px;
height:32px;
background:url("musicimage/no_volume.png");
left:427px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="outContainer">
<div class="inContainer">
<div class="cover"></div>
<div class="progress">
<div class="progressLine">
<div class="progressLineLeft"></div>
<div class="realTimePro"></div>
<div class="progressLineRight"></div>
</div>
</div>
<div class="control">
<div class="previous"></div>
<div class="isPlayPause"></div>
<div class="next"></div>
<div class="noMulted" id="volume"></div>
</div>
</div>
</div>
<script type="text/javascript">
var isPlayPause=document.querySelector(".isPlayPause"),
realTimePro=document.querySelector(".realTimePro"),
progress=document.querySelector(".progress"),
progressLine=document.querySelector(".progressLine"),
volume=document.querySelector("#volume");
//创建音频对象
var audio=new Audio();
audio.src="music/mus/AcousticGuitar1.mp3";
//创建音频播放暂停时间
var isplay=false;
isPlayPause.onclick=function(){
isplay=!isplay;
if(isplay){
audio.play();
}
else{
audio.pause();
}
};
//创建音频静音事件
var ismulted=false;
volume.onclick=function(){
ismulted=!ismulted;
if(ismulted){
audio.volume=0;
this.className="multed";
}
else{
audio.volume=1;
this.className="noMulted";
}
};
//音频播放控制进度条移动
audio.addEventListener("timeupdate",function(){
realTimePro.style.width=(audio.currentTime/audio.duration)*100+"%";
});
//创建点击进度条控制音频播放位置
progressLine.onclick=function(e){
var ev=e||event;
audio.currentTime=audio.duration*(ev.clientX-this.offsetLeft-progress.offsetLeft)/progressLine.offsetWidth;
realTimePro.style.width=(ev.clientX-this.offsetLeft-progress.offsetLeft)/progressLine.offsetWidth*100+"%";
};
</script>
</body>
</html>