无法快进跳转，直接回到起点
来源：7-5 自定义audio-js（2）
慕仙本仙_
2020-04-06 17:53:56
老师，点击进度条没有跳转并直接回到起点，爆出一行错误：
index.html?__hbt=1586152170087:219 Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
at HTMLDivElement.progressNode.onclick (index.html?__hbt=1586152170087:219)
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音频学习</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.outerNode{
width:505px;
height:406px;
position: absolute;;
left:50%;
top:50%;
margin:-203.5px 0 0 -253.5px;
border:1px solid #a6a18d;
border-radius:8px;
box-shadow: 0 0 16px #A6A18D;
}
.innerNode{
width:503px;
height:405px;
border-top:1px solid #e1d1b9;
border-left:1px solid #e1d1b9;
border-right:1px solid #e1d1b9;
border-radius:8px;
}
.topNode{
width:100%;
height:198px;
border-bottom: 1px solid #787463;
background:url(music/pic/fmt01.jpg) center center ;
background-size:cover;
overflow: hidden;
/*border-radius: 8px;*/
}
.lineNode{
width:100%;
height:46px;
border-top:1px solid #f9f7ee;
border-bottom: 1px solid #a29d8a;
background:url(musicimage/linebg.jpg) repeat-x;
}
.progressNode{
width:440px;
height:18px;
float:left;
margin:13px 0 0 18px;
background: url(musicimage/progressbg.jpg) repeat-x;
position:relative;
}
.progressNode .progressLeft{
width:7px;
height:100%;
position:absolute;
left:0;
background:url(musicimage/leftNode.jpg);
}
.progressNode .progressRight{
width:7px;
height:100%;
position:absolute;
right:0;
background:url(musicimage/rightNode.jpg);
}
.trueLine{
position:absolute;
left:3px;
top:2px;
width:0%;
height:12px;
background:url(musicimage/green_bg.png) repeat-x;
border-radius: 6px;
}
.bottomNode{
width:100%;
height:158px;
border-top:#A29D8A;
background:url(musicimage/bottomBg.jpg) repeat-x;
position:relative;
}
.lastNode{
width:75px;
height: 74px;
position:absolute;
left:118px;
top:39px;
background: url(musicimage/lastBg.png) no-repeat;
cursor: pointer;
}
.playNode{
width:95px;
height: 94px;
background:url(musicimage/playNode.png) no-repeat;
position: absolute;
left:202px;
top:29px;
cursor: pointer;
}
.pauseNode{
width:95px;
height: 94px;
background:url(musicimage/Node.png) no-repeat;
position: absolute;
left:202px;
top:29px;
cursor: pointer;
}
.nextNode{
width:75px;
height: 74px;
position:absolute;
left:306px;
top:39px;
background: url(musicimage/rightbg.png) no-repeat;
cursor: pointer;
}
.volumnNode{
width:37px;
height:32px;
background:url(musicimage/volume.png) no-repeat;
position: absolute;
right:43px;
top:58px;
cursor: pointer;
}
.no-volumnNode{
width:37px;
height:32px;
background:url(musicimage/no_volume.png) no-repeat;
position: absolute;
right:43px;
top:58px;
cursor: pointer;
}
</style>
</head>
<body>
<!--最外层的元素-->
<div class="outerNode">
<!--为了配合border的内层元素-->
<div class="innerNode">
<!--topNode封面图元素-->
<div class="topNode"></div>
<!--lineNode 进度条元素-->
<div class="lineNode">
<div class="progressNode">
<div class="progressLeft"></div>
<div class="progressRight"></div>
<!--真正的进度条-->
<div class="trueLine"></div>
</div>
</div>
<!--bottomNode 控件元素-->
<div class="bottomNode">
<!--上一首-->
<div class="lastNode"></div>
<!--播放按钮-->
<div class="playNode"></div>
<!--下一首-->
<div class="nextNode"></div>
<!--声音-->
<div class="volumnNode"></div>
</div>
</div>
</div>
</body>
<script>
var myAudio=new Audio();
myAudio.src='music/mus/AcousticGuitar1.mp3';
//谷歌浏览器不允许直接play
var playBtn=document.querySelector('.playNode');//播放暂停按钮
var volumnBtn=document.querySelector('.volumnNode');//声音按钮
var trueLine=document.querySelector('.trueLine');//绿色进度条；
var progressNode=document.querySelector('.progressNode');
var outerNode=document.querySelector('.outerNode');//最外层元素
var playBlr=true;//控制播放暂停的布尔值
var volumnBlr=true;//控制声音的布尔值
//播放暂停的切换事件
playBtn.onclick=function(){
playBlr=!playBlr;
if(playBlr==false){
myAudio.pause();
//playBtn.className='pauseNode';
}else{
myAudio.play();
//playBtn.className='playNode';
}
}
//静音
volumnBtn.onclick=function(){
volumnBlr=!volumnBlr;
if(volumnBlr==false){
myAudio.volume=0;
volumnBtn.className='no-volumnNode';
}else{
myAudio.volume=1;
volumnBtn.className='volumnNode';
}
}
//进度条随着播放改变
myAudio.addEventListener('timeupdate',function(){
trueLine.style.width=myAudio.currentTime/myAudio.duration*100+'%';
});
//点击进度条，直接让音乐跳转到点击的进度
progressNode.onclick=function(e){
var ev=e||event;
var percentClick=(ev.clientX-(this.offsetLeft+outerNode.offsetLeft))/this.offsetWidth*100+'%';
console.log(percentClick);
trueLine.style.width=percentClick;
console.log(myAudio.duration*percentClick);
myAudio.currentTime=myAudio.duration*percentClick;
}
</script>
</html>
1回答
-
同学你好，计算的时候不需要变为百分比的形式，因为%是字符串拼接的，不能进行运算，结果会为NaN。直接小数比例运算即可，如下
另外播放器默认应该是暂停的，点击的时候再开启，代码中正好相反，导致点击两个才能播放，修改如下
自己再测试下，祝学习愉快！
0
相似问题