本博客音乐可拖拽进度条实现方法

起初本博客的左侧音乐播放器, 进度条是不可拖拽的, 最近在做一个在线音乐播放器, 涉及到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;
});

实现后的效果见本博客左侧导航栏的音乐播放器