起初本博客的左侧音乐播放器, 进度条是不可拖拽的, 最近在做一个在线音乐播放器, 涉及到js的拖拽 鼠标弹起等事件, 索性写成一个类, 然后移植到博客上, 下面直接放代码.
进度条样式:
#music-progress {
position: relative;
height: 18px;
display: flex;
align-items: center;
cursor: pointer;
}
#music-progress .progress-bar {
position: absolute;
width: 100%;
background-color: #b9b9b9;
height: 2px;
border-radius: 5px;
z-index: 1;
transition: all .3s;
}
#music-progress .progress-cur {
position: absolute;
background-color: #39b3cd;
height: 2px;
width: 0%;
border-radius: 5px;
z-index: 2;
transition: all .3s;
}
#music-progress .progress-btn {
width: 10px;
height: 10px;
position: absolute;
margin-left: -5px;
background-color: #39b3cd;
border-radius: 50%;
left: 0%;
z-index: 3;
transition: all .3s;
}
#music-progress#music-progress .progress-btn:hover,
#music-progress#music-progress .progress-btn.playing {
box-shadow: 0 0 10px 0 #39b3cd;
}
html:
<div id="music-progress">
<div class="progress-bar"></div>
<div class="progress-cur"></div>
<div class="progress-btn"></div>
</div>
js:
class Player {
constructor(selector, percent, callback) {
this.selector = selector;
this.percent = percent || 0;
this.callback = callback || function () {};
this.progress = document.getElementById(this.selector);
this.bar = this.progress.getElementsByClassName('progress-bar')[0];
this.cur = this.progress.getElementsByClassName('progress-cur')[0];
this.btn = this.progress.getElementsByClassName('progress-btn')[0];
this.minLength = this.progress.offsetLeft;
this.maxLength = this.progress.offsetWidth + this.minLength;
// 窗口大小改变偏移量重置
window.onresize = () => {
this.minLength = this.progress.offsetLeft;
this.maxLength = this.progress.offsetWidth + this.minLength;
};
// 鼠标点击按钮事件
this.btn.onmousedown = e => {
e.preventDefault();
// console.log('鼠标点击进度按钮');
this.btnIsClick = true;
};
// 进度条整体的鼠标按下事件
this.progress.onmousedown = e => {
// console.log('进度条按下');
this.move(e);
};
// 鼠标移动事件, 用于拖动
document.onmousemove = e => {
// console.log('鼠标正在移动');
if (this.btnIsClick) {
this.move(e);
}
};
// 鼠标弹起事件,用于释放拖动
document.onmouseup = e => {
// console.log('鼠标弹起');
this.btnIsClick = false;
};
}
/**
* 进度条拖动
*/
move(e) {
let percent = 0;
if(e.clientX < this.minLength) {
percent = 0;
} else if(e.clientX > this.maxLength) {
percent = 1;
} else {
percent = (e.clientX - this.minLength) / (this.maxLength - this.minLength);
}
this.callback && this.callback(percent);
this.goto(percent);
}
/**
* 设置进度条位置
* @param percent
*/
goto(percent) {
this.btn.style.left = (percent * 100) + "%";
this.cur.style.width = (percent * 100) + "%";
}
}
使用方法:
let audio = new Audio();
// 此处省略audio的操作逻辑
new Player('music-progress', 0, function (val) {
audio.currentTime = (audio.duration || 0) * val;
});
实现后的效果见本博客左侧导航栏的音乐播放器