艺术与舞蹈添加音频小窗播放，同时只能播放一个音频两功能

闫增涛

2024-06-14 efc4c74c8bdc856d3bbc9a958ff230a197db4044

艺术与舞蹈添加音频小窗播放，同时只能播放一个音频两功能

 src/App.vue

@@ -65,7 +65,7 @@
        process.env.VUE_APP_RESOURCE_CTX +
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "childHealth")
            : "artAndDance")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

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

@@ -628,23 +628,23 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -667,12 +667,12 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -691,8 +691,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
            }
          }
        });
      }
    },

 src/books/artAndDance/assets/main.less

@@ -420,16 +420,6 @@
}

/* 媒体查询做基础响应式布局 */
@media (max-width: 430px) {
  .ans-dance  {
    .page-box {
      min-height: 750px;
    }
    .pg-mh {
      min-height: 815px;
    }
  }
}
@media (max-width: 660px) {
  .ans-dance {
    /* 分页padding */
@@ -453,6 +443,12 @@
        margin-top: 10px;
      }
    }
    .page-box{
      min-height: 500px;
    }
    .pg-mh {
      min-height: 815px;
    }
  }
}
@media (min-width: 660px) {
@@ -471,9 +467,6 @@
      flex-wrap: nowrap;
      li {
        width: 58%;
      }
      li:nth-child(2) {
        margin-left: 10px;
      }
    }
  }

 src/books/artAndDance/view/components/chapter001.vue

@@ -4,7 +4,6 @@
      <div v-if="showPageList.indexOf(4) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
        <img src="../../assets/images/01.gif" alt="" style="width: 53%;" class="cover-img">
        <audio></audio>
      </div>
    </div>
    <div class="page-box" page="5">
@@ -55,13 +54,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8 ">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
              <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
            </li>
            <li class="fl al-cn mt-20 " >
              <span class="wh-nr auido-text mr-8 ">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
              <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
            </li>
          </ul>
          <h3 id="c003">黄鹤楼送孟浩然之广陵</h3>
@@ -173,6 +172,9 @@
      this.auidoPathOne = await getResourcePath("2c5f6c69b0f9f7a3c03e473cb8c977f5");
      this.auidoPathTwo = await getResourcePath("e93c0fdde08be5a4386c8c863892a287");
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</script>

 src/books/artAndDance/view/components/chapter002.vue

@@ -65,13 +65,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
              <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
              <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
            </li>
          </ul>
          <h3 id="c006">亡羊补牢</h3>
@@ -219,6 +219,9 @@
          this.addNum()
        }
      },200)
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};

 src/books/artAndDance/view/components/chapter003.vue

@@ -54,13 +54,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
              <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
              <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
            </li>
          </ul>
          <h3 id="c009">小儿垂钓</h3>
@@ -171,6 +171,9 @@
      this.auidoPathOne = await getResourcePath("85923e871441c541991be07fe4ce8771");
      this.auidoPathTwo = await getResourcePath("c018f7a6434abfac0b0e0da1174d643a");
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
  }
</script>

 src/books/artAndDance/view/components/chapter004.vue

@@ -60,13 +60,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
              <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
              <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
            </li>
          </ul>
          <h3 id="c012">寻隐者不遇</h3>
@@ -175,6 +175,9 @@
      this.auidoPathOne = await getResourcePath("a865ff99b91fa24d87ac81a883be54db");
      this.auidoPathTwo = await getResourcePath("66f3cc00d272a120514201e13e87fb9d");
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
  }
</script>

 src/books/artAndDance/view/components/chapter005.vue

@@ -80,11 +80,11 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
              <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8"> 女童音 </span>
              <audio :src="auidoPathTwo" controls></audio>
              <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
            </li>
          </ul>
          <h3 id="c015">渔歌子</h3>
@@ -231,6 +231,9 @@
        }
      }, 200);
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</script>

 src/books/artAndDance/view/components/header.vue

@@ -1,11 +1,11 @@
<template>
  <div class="chapter" num="1">
    <div class="page-box mt-20" page="1" style="min-height: auto;">
    <div class="page-box mt-20" page="1">
      <div v-if="showPageList.indexOf(1) > -1">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </div>
    </div>
    <div class="page-box" page="2" style="min-height: auto;">
    <div class="page-box" page="2" >
      <div v-if="showPageList.indexOf(2) > -1">
        <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
      </div>

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

@@ -18,30 +18,40 @@
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      >
      </chapterTwo>
      <chapterThree
      v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterThree>
      <chapterFour
      v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterFour>
      <chapterFive
      v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
    </div>

    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    ></miniAudio>
  </div>
</template>

@@ -54,6 +64,7 @@
import chapterFive from './chapter005.vue'
import chapterSix from './chapter006.vue'
import NoteIcon from "@/assets/images/biji.png";
import miniAudio from "@/components/miniAudio/index.vue";
import _ from "lodash";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
@@ -75,6 +86,9 @@
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      audioPath: "",
      currentTime: null,
      videoList: [],
    };
  },
  computed: {
@@ -229,6 +243,7 @@
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio()
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
@@ -252,6 +267,7 @@
          }
        }
      } else if (event.target.scrollTop < this.previousScrollTop) {
        this.handleAudio()
        // 向上
        const currentScrollTop = event.target.scrollTop;
        if (currentScrollTop <= this.loadThreshold) {
@@ -639,23 +655,23 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -678,12 +694,12 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -702,8 +718,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
            }
          }
        });
      }
    },
@@ -834,6 +850,71 @@
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
        // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      this.videoList = allVideo;
      if (allVideo.length) {
        // 查找播放状态的最后一条音频
        const playAudio = allVideo
          .reverse()
          .find((item) => item.paused == false);
        if (playAudio) {
          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();
            }
          }
        }
      }
    },
    // 关闭mini video
    closeMiniAudio() {
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio(path) {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if(allVideo.length) {
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          if(item.currentSrc != path) {
            item.pause()
          }
        }
      }
      this.closeMiniAudio()
    }
  },
  components: {
    pageHeader,
@@ -843,6 +924,7 @@
    chapterFour,
    chapterFive,
    chapterSix,
    miniAudio
  },
};
</script>

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

@@ -610,23 +610,23 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -649,12 +649,12 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -673,8 +673,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
            }
          }
        });
      }
    },

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

@@ -618,23 +618,23 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -657,12 +657,12 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            ),
            )
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -681,8 +681,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
            }
          }
        });
      }
    },