英语音频播放优化

闫增涛

2024-06-27 8ba5b1346308451e2c66f4414aa2c0b242d503d2

英语音频播放优化

 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
            : "artAndDance")
            : "english")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

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

@@ -288,7 +288,7 @@
            <h3 id="c002" class="fl al-cn">
              <span class="bjh3">Listening</span>
              <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
              <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </h3>
            <p>
              <b>Four foreigners are talking about their impressions on Chinese
@@ -357,7 +357,7 @@
            </p>
            <p class="center"><b>My Experience in Wonderland</b></p>
            <p class="center">
            <audio :src="resource.readingOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
            <audio :src="resource.readingOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>

            </p>
            <p class="block">
@@ -452,7 +452,7 @@
              <span class="line-border-box"></span>
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
              ></audio>
            <p>wonderland /ˈwʌndəlænd/ <i>n.</i> 有许多奇妙事物的地方</p>
            <div class="bkbj">
              <p><i>land or place full of marvels or wonderful things</i></p>
@@ -1613,7 +1613,7 @@
              <span class="line-border-box"></span>
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
              ></audio>
            <p>breeze /briːz/ <i>n.</i> 微风；和风</p>
            <div class="bkbj">
              <p><i>a light wind</i></p>
@@ -1994,7 +1994,7 @@
                to China and fill in the blanks with what you hear.</b>
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
              ></audio>
            <p>
              After studying in China for almost three years by now,I call China
              my second homeland.I love the natural beauty,the 1.________,the
@@ -2635,7 +2635,6 @@
      };
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "english-book-question-one",
        JSON.stringify(this.questionData)
@@ -2742,9 +2741,6 @@
      this.setTestData()
      console.log(this.testData);

    },
    audioPlay() {
      this.$emit("closeMiniAudio");
    },
  },
};

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

@@ -14,25 +14,21 @@
      ></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>
@@ -112,6 +108,7 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.closeAudio()
        }, 200);
      },
    },
@@ -901,6 +898,25 @@
    closeMiniAudio() {
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio() {
      let allAudio = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener("play", () => {
          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: {
    pageHeader,

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

@@ -904,7 +904,6 @@
      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];