From efc4c74c8bdc856d3bbc9a958ff230a197db4044 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 14 六月 2024 17:51:40 +0800 Subject: [PATCH] 艺术与舞蹈添加音频小窗播放,同时只能播放一个音频两功能 --- src/books/embedded/view/components/index.vue | 20 ++-- src/books/artAndDance/view/components/header.vue | 4 src/books/artAndDance/view/components/chapter003.vue | 7 + src/books/artAndDance/view/components/chapter002.vue | 7 + src/books/artAndDance/view/components/chapter001.vue | 8 + src/books/artAndDance/view/components/chapter004.vue | 7 + src/books/artAndDance/view/components/chapter005.vue | 7 + src/books/artAndDance/view/components/index.vue | 104 +++++++++++++++++++++++-- src/books/mathBook/view/components/index.vue | 20 ++-- src/App.vue | 2 src/books/English/view/components/index.vue | 20 ++-- src/books/artAndDance/assets/main.less | 19 +--- 12 files changed, 157 insertions(+), 68 deletions(-) diff --git a/src/App.vue b/src/App.vue index 65f4077..16e08b0 100644 --- a/src/App.vue +++ b/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; diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue index 8722e79..d0b26c3 100644 --- a/src/books/English/view/components/index.vue +++ b/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; - }, - }, + } + } }); } }, diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less index 5642906..04ec6c4 100644 --- a/src/books/artAndDance/assets/main.less +++ b/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; } } } diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue index 859425a..1306868 100644 --- a/src/books/artAndDance/view/components/chapter001.vue +++ b/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> diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue index 4400f7f..9c77c40 100644 --- a/src/books/artAndDance/view/components/chapter002.vue +++ b/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) } }, }; diff --git a/src/books/artAndDance/view/components/chapter003.vue b/src/books/artAndDance/view/components/chapter003.vue index 374f78b..0f81d92 100644 --- a/src/books/artAndDance/view/components/chapter003.vue +++ b/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> diff --git a/src/books/artAndDance/view/components/chapter004.vue b/src/books/artAndDance/view/components/chapter004.vue index b9631f1..2ba2656 100644 --- a/src/books/artAndDance/view/components/chapter004.vue +++ b/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> diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue index 31c6c3e..0ba88b0 100644 --- a/src/books/artAndDance/view/components/chapter005.vue +++ b/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> diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue index 57aea29..04df044 100644 --- a/src/books/artAndDance/view/components/header.vue +++ b/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> diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue index 5574cf3..02232f5 100644 --- a/src/books/artAndDance/view/components/index.vue +++ b/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> diff --git a/src/books/embedded/view/components/index.vue b/src/books/embedded/view/components/index.vue index f187aa3..3c1eeaa 100644 --- a/src/books/embedded/view/components/index.vue +++ b/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; - }, - }, + } + } }); } }, diff --git a/src/books/mathBook/view/components/index.vue b/src/books/mathBook/view/components/index.vue index b135e8a..d608cce 100644 --- a/src/books/mathBook/view/components/index.vue +++ b/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; - }, - }, + } + } }); } }, -- Gitblit v1.9.1