<style type="text/css">
/ 父框 /
mainBox {
margin: auto;
position: relative;
display: flex;
align-items: center;
width: 180px;
height: 30px;
}
/ 按钮、滑块、百分比显示区 /
mainBox div[id=per] { color: olive; font-size: 10px; width:40px;}
mainBox input { outline: none; cursor: pointer; font-size: 10px; }
mainBox input[type=range] {
width: 100px;
background: red;
}
mainBox input[type=button] {
width: 40px;
border: 1px solid tan;
border-radius: 8px;
}
</style>

<!-- 播放器HTML代码开始  -->
<div id="mainBox">
<input id="mbtn" type="button" value="播放" />
<input id="bar" type="range" value="0" />
<div id="per"></div>
</div>
<!-- 播放器HTML代码结束  -->

<script language="javascript">
//各操作变量
var mbtn = document.getElementById('mbtn');
var bar = document.getElementById('bar');
var per = document.getElementById('per');
var aud = document.createElement('audio');
var barGo = true; //进度操作标识
//audio设定
aud.src ="http://www.kumeiwp.com/sub/filestores/2021/01/17/8f8074b0b391a0e0d3a53d88442a803f.mp3";
aud.addEventListener('canplaythrough', function() { per.innerHTML = "0"; }, false);
aud.addEventListener('ended', iplay(0), true);
aud.addEventListener('timeupdate', barVal, true);
//aud.autoplay = "autoplay";
aud.loop = "loop";
mbtn.value = aud.autoplay ? "暂停" : "播放";
 //播放进度
function barVal(){
if(barGo){ // 若滑块无人为操作：指示播放进度
var jindu = Math.ceil(100*aud.currentTime/aud.duration);
bar.value = jindu;
per.innerHTML = jindu + "%";
}
}
function iplay(flag){ //播放暂停及按钮状态
    if(flag==1){
            aud.paused ? (aud.play(), mbtn.value="暂停") : (aud.pause(), mbtn.value="播放");
    }else{
            aud.loop ? mbtn.value = "暂停" : mbtn.value = "播放";
    }
}
//滑块鼠标按下：尚未考虑左右键
bar.onmousedown = function() { barGo = false; }
//滑块鼠标松开：尚未考虑左右键
bar.onmouseup=function(){
var x = bar.value*aud.duration/100;
aud.currentTime = x;
barGo = true;
}
//按钮按下
mbtn.onclick = function(){ iplay(1); }
</script>