Method bindPlayerControls

js/ReadingSystem.js:991–1092

* 绑定播放器控制事件

()

   * 绑定播放器控制事件
   */
  bindPlayerControls() {
    if (
      this.bindingFlags.playerControls ||
      !this.dom.playPauseBtn ||
      !this.dom.speedBtn ||
      !this.dom.progressBar ||
      !this.dom.audioPlayer ||
      !this.dom.loopToggleBtn
    ) {
      return;
    }
    this.bindingFlags.playerControls = true;

    // 播放/暂停
    on(this.dom.playPauseBtn, 'click', () => {
      if (this.dom.audioPlayer.paused) {
        this.dom.audioPlayer.play();
      } else {
        this.dom.audioPlayer.pause();
      }
    });

    // 倍速
    on(this.dom.speedBtn, 'click', () => {
      this.cyclePlaybackSpeed();
    });

    // 循环
    on(this.dom.loopToggleBtn, 'click', () => {
      this.toggleLoopPlayback();
      this.state.sentence = false;
    });

    // 进度条
    const seekByClientX = (clientX) => {
      if (!this.dom.audioPlayer.duration) return;
      const rect = this.dom.progressBar.getBoundingClientRect();
      const percent = clamp((clientX - rect.left) / rect.width, 0, 1);
      this.dom.audioPlayer.currentTime = percent * this.dom.audioPlayer.duration;
    };

    on(this.dom.progressBar, 'click', (event) => {
      seekByClientX(event.clientX);
    });

    on(
      this.dom.progressBar,
      'pointerdown',
      (event) => {
        this.state.isProgressDragging = true;
        addClass(this.dom.progressBar, 'dragging');
        this.dom.progressBar.setPointerCapture(event.pointerId);
        seekByClientX(event.clientX);
      },
      { passive: true }
    );

    on(