舞蹈分页

闫增涛

2024-06-05 3fb594dc317848107fd7bbb51631cfb763c19f5f

 src/books/English/view/components/index.vue

@@ -18,7 +18,11 @@
        :showPageList="loadPageList"
      ></chapterOne>
    </div>
    <miniAudio :path="audioPath"></miniAudio>
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      ref="audioPlayer"
    ></miniAudio>
  </div>
</template>

@@ -47,7 +51,9 @@
      loadPageList: [],
      questionData: {},
      renderSignMap: {},
      audioPath:''
      audioPath: "",
      currentTime: null,
      videoList: [],
    };
  },
  computed: {
@@ -82,7 +88,7 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.getAduio();
          // this.getAduio();
        }, 200);
      },
    },
@@ -160,6 +166,7 @@
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio();
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
@@ -183,6 +190,7 @@
          }
        }
      } else if (event.target.scrollTop < this.previousScrollTop) {
        this.handleAudio();
        // 向上
        const currentScrollTop = event.target.scrollTop;
        if (currentScrollTop <= this.loadThreshold) {
@@ -635,17 +643,48 @@
      }
      // chooseWords
    },
    // 获取auido实例
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo)
      allVideo = Array.from(allVideo);
      this.videoList = allVideo;
      if (allVideo.length) {
        const playAudio = allVideo.reverse().find((item) => item.paused == false);
        // 查找播放状态的最后一条音频
        const playAudio = allVideo
          .reverse()
          .find((item) => item.paused == false);
        if (playAudio) {
          console.log("第个音频在播放", playAudio.src);
          this.audioPath = playAudio.src
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap < 0) {
            playAudio.pause();
            this.audioPath = playAudio.src;
            this.currentTime = playAudio.currentTime;
          }
        }
      }
    },
    // 页面向上滚动，音频小窗回收
    handleAudio() {
      if (!this.audioPath) return false;
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if (allVideo.length) {
        //查找与小窗播放音频同源的页面audio DOM
        const playAudio = allVideo.find((item) => item.src == this.audioPath);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap >= 0) {
            if (this.$refs.audioPlayer) {
              const playerState = this.$refs.audioPlayer.getVideoPlayer();
              this.audioPath = "";
              playAudio.currentTime = playerState.currentTime;
              if (!playerState.paused) playAudio.play();
            }
          }
        }
      }
    },