音频小窗和关闭其他优化

闫增涛

2024-06-27 d373b2079affa74cbf9c8a53b7fee8c96f75aec6

音频小窗和关闭其他优化

 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

@@ -1,21 +1,48 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content" :style="{
    <div
      class="page-content"
      :style="{
      fontSize: fontSize ? fontSize + 'px' : '16px',
      transform: `scale(${pageZoom ? pageZoom : 1})`,
      transformOrigin: 'center top',
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne>
      <chapterTwo @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
        <chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
        <chapterFour @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
        @saveCharacters="saveCharacters"
        @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <chapterTwo
        @saveCharacters="saveCharacters"
        @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      ></chapterTwo>
      <chapterThree
        @saveCharacters="saveCharacters"
        @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
        @saveCharacters="saveCharacters"
        @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
    </div>
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    >
    </miniAudio>
  </div>
</template>
@@ -23,9 +50,9 @@
<script>
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue"
import chapterThree from "./chapter003.vue"
import chapterFour from "./chapter004.vue"
import chapterTwo from "./chapter002.vue";
import chapterThree from "./chapter003.vue";
import chapterFour from "./chapter004.vue";
import miniAudio from "@/components/miniAudio/index.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
@@ -623,23 +650,19 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true
          observeParents: true,
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -662,12 +685,8 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -686,8 +705,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            }
          }
            },
          },
        });
      }
    },
@@ -729,7 +748,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -761,7 +780,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(

 src/books/artAndDance/view/components/chapter001.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 controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay" ></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20 " >
              <span class="wh-nr auido-text mr-8 ">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c003">黄鹤楼送孟浩然之广陵</h3>
@@ -172,9 +172,6 @@
      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

@@ -69,13 +69,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 controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c006">亡羊补牢</h3>
@@ -225,9 +225,6 @@
        }
      },200)
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</script>

 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 controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </li>
          </ul>
          <h3 id="c009">小儿垂钓</h3>
@@ -171,9 +171,6 @@
      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 controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c012">寻隐者不遇</h3>
@@ -175,9 +175,6 @@
      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

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

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

@@ -18,28 +18,23 @@
      <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"
@@ -123,6 +118,7 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.closeAudio()
        }, 200);
      },
    },
@@ -899,21 +895,27 @@
    closeMiniAudio() {
      this.audioPath = "";
    },

    // 点击音频播放，关闭其他音频
    closeAudio(path) {
      let allVideo = (
    closeAudio() {
      let allAudio = (
        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()
          }
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener('play',() => {
          console.log('播放',item.src);
          const audioList = Array.from(allAudio);
            for (let cindex = 0; cindex < audioList.length; cindex++) {
            const citem = audioList[cindex];
            if(citem.currentSrc != item.src) {
              citem.pause()
              
        }
      }
      this.closeMiniAudio()
        })
      }
    }
  },
  components: {