From cbcd7a501d14405586f1fd504bd50a7fe1088a75 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Thu, 11 Sep 2025 19:07:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E9=9F=B3=E9=A2=91?= =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将硬编码的音频列表替换为从API获取的动态数据 - 添加播放进度同步功能，支持多个音频列表 - 实现底部播放器组件，显示当前播放曲目信息 - 优化学生列表切换逻辑，更新显示信息 - 移除冗余代码，简化音频管理逻辑 --- index.html | 44 +++++----- static/js/index.js | 214 +++++++++++++++------------------------------ 2 files changed, 93 insertions(+), 165 deletions(-) diff --git a/index.html b/index.html index de738a0..2574c1d 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@
-
+
@@ -107,27 +107,27 @@
-
+
{{ index + 1 }}
- +
-
画Remix
-
AI音乐榜冠军
-
2024.3
+
{{ item.title }}
+
{{ item.desc }}
+
{{ item.date }}
- + - - + +
@@ -143,21 +143,21 @@
-
画Remix
-
走过的路汇成星河，脚下的路更辽阔
+
{{ item.title }}
+
{{ item.desc }}
- + - - + +
- +
@@ -174,10 +174,10 @@
-
《听风少年的梦幻之城》
+
《{{ zeroOrderStudents.title }}》
- 林林林 | 7岁 | 广州 + {{ zeroOrderStudents.name }} | {{ zeroOrderStudents.age }}岁 | {{ zeroOrderStudents.city }}
@@ -213,18 +213,18 @@
-
+
- -
你好，我是林林林
+ +
{{ playData?.title }}
- - + +
diff --git a/static/js/index.js b/static/js/index.js index 17c92cf..17c979c 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -31,37 +31,42 @@ const search = createApp({ const audioPlayer = ref(null); - const progress = ref(20); // 播放进度百分比 + const progress = ref(0); // 播放进度百分比 // 响应式变量存储当前播放时间和总时长 - const currentTimeFormatted = ref('00:00'); - const durationFormatted = ref('00:00'); - + const currentTimeFormatted = ref("00:00"); + const durationFormatted = ref("00:00"); + // 格式化时间函数：将秒数转换为 MM:SS 格式 const formatTime = (seconds) => { const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); - return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; + return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`; }; // 更新进度的函数 const getProgress = () => { if (!audioPlayer.value) return; const currentTime = audioPlayer.value.currentTime || 0; const duration = audioPlayer.value.duration || 0; - const progress = duration > 0 ? (currentTime / duration) * 100 : 0; - setProgress(progress, audioPlayer.value.src); - + const p = duration > 0 ? (currentTime / duration) * 100 : 0; + setProgress(p, audioPlayer.value.src); + + progress.value = p; // 更新时间显示 currentTimeFormatted.value = formatTime(currentTime); durationFormatted.value = formatTime(duration); }; const setProgress = (val, src) => { - audioList.value.forEach((item) => { - if (item.url === src) item.progress = val; + awardAudioList.value.forEach((item) => { + if (item.playurl == src) item.progress = val; }); customList.value.forEach((item) => { - if (item.src === src) item.progress = val; + if (item.playurl == src) item.progress = val; + }); + + studentList.value.forEach((item) => { + if (item.playurl == src) item.progress = val; }); }; @@ -102,6 +107,7 @@ const search = createApp({ let bannerList = ref([]); let awardMVList = ref([]); + let awardAudioList = ref([]); const init = () => { ajaxget("https://pujianchaoyin.com/index/api").then((res) => { @@ -109,6 +115,24 @@ const search = createApp({ const data = res.data; bannerList.value = data.banner; awardMVList.value = data.awardMVList; + + data.awardAudioList.forEach((item, index) => { + item["playurl"] = `https://app.gter.net/image/miniApp/mp3/${index + 1}.mp3`; + }); + + awardAudioList.value = data.awardAudioList; + + customList.value = data.customAudioList; + + studentList.value = data.studentList || []; + console.log("customList", studentList.value[0]); + studentList.value.forEach((item, index) => { + item["title"] = index; + item["order"] = index; + }); + + zeroOrderStudents.value = studentList.value[0]; + nextTick(() => { bannerSwiper(); }); @@ -135,16 +159,10 @@ const search = createApp({ // 添加进度更新事件监听器 if (audioPlayer.value) { - console.log("volume", audioPlayer.value.volume); - + volume.value = audioPlayer.value.volume * 100; audioPlayer.value.addEventListener("timeupdate", getProgress); audioPlayer.value.addEventListener("loadedmetadata", getProgress); } - - studentList.value.forEach((item, index) => { - item["order"] = index; - // item["random"] = generateRandomString(); - }); }); // 组件卸载时清理事件监听器 @@ -153,24 +171,6 @@ const search = createApp({ audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress); }); - // 头部播放状态 - let audioHeadState = ref(false); - - // 头部播放 - 开启 - const playHead = () => { - closeAll(); - nextTick(() => { - audioPlayer.value.src = "./static/mp3/1.MP3"; - audioPlayer.value.play().then(() => (audioHeadState.value = true)); - }); - }; - - // 头部播放 - 暂停 - const pauseHead = () => { - audioPlayer.value.pause(); - audioHeadState.value = false; - }; - // 播放 组件状态 let previewState = ref(false); @@ -197,39 +197,6 @@ const search = createApp({ art = null; }; - let audioList = ref([ - { - url: "https://app.gter.net/image/miniApp/mp3/1.mp3", - }, - { - url: "https://app.gter.net/image/miniApp/mp3/2.mp3", - }, - { - url: "https://app.gter.net/image/miniApp/mp3/3.mp3", - }, - { - url: "https://app.gter.net/image/miniApp/mp3/4.mp3", - }, - ]); - - const playAudio = (index) => { - closeAll(); - nextTick(() => { - let target = audioList.value[index]; - const url = target.url; - if (audioPlayer.value?.src != url) audioPlayer.value.src = url; - audioPlayer.value.play().then(() => { - target["state"] = true; - }); - }); - }; - - const pauseAudio = (index) => { - let target = audioList.value[index]; - target["state"] = false; - audioPlayer.value.pause(); - }; - // 快进 和 后退 10秒 const fastForward = (type = "fast", src, area) => { if (!audioPlayer.value) return; @@ -247,66 +214,61 @@ const search = createApp({ getProgress(); }; + let playData = ref(null); + const manageAudio = (src, area) => { const audio = audioPlayer.value; closeAll(); nextTick(() => { - if (area == "head") { - if (audio?.src != src) audio.src = src; - audio.play().then(() => (audioHeadState.value = true)); - } + if (audio?.src != src) audio.src = src; - if (area == "works") { - if (audio?.src != src) audio.src = src; - audio.play().then(() => { - audioList.value.forEach((item) => { - if (item.url == src) item["state"] = true; + audio.play().then(() => { + if (area == "works") { + awardAudioList.value.forEach((item) => { + if (item.playurl == src) { + item["state"] = true; + playData.value = { ...item, area }; + } }); - }); - } + } - console.log("area", area, src); - - if (area == "custom") { - if (audio?.src != src) audio.src = src; - audio.play().then(() => { + if (area == "custom") { customList.value.forEach((item) => { - if (item.src == src) item["state"] = true; + if (item.playurl == src) { + item["state"] = true; + playData.value = { ...item, area }; + } }); - }); - } + } + }); }); }; + // 重新播放 + const rePlay = () => { + if (!playData.value) return; + const { playurl, area } = playData.value; + manageAudio(playurl, area); + }; + const closeAll = () => { audioPlayer.value.pause(); - audioHeadState.value = false; - audioList.value.forEach((item) => { - item["progress"] = 0; + awardAudioList.value.forEach((item) => { item["state"] = false; }); customList.value.forEach((item) => { - item["progress"] = 0; item["state"] = false; }); + + console.log("playData", playData); + + playData.value && (playData.value.state = false); }; - let customList = ref([ - { - src: "https://app.gter.net/image/miniApp/mp3/1.mp3", - }, - { - src: "https://app.gter.net/image/miniApp/mp3/2.mp3", - }, - { - src: "https://app.gter.net/image/miniApp/mp3/3.mp3", - }, - { - src: "https://app.gter.net/image/miniApp/mp3/4.mp3", - }, - ]); + let customList = ref([]); let studentIndex = ref(0); + let zeroOrderStudents = ref({}); let studentList = ref([ { @@ -317,48 +279,15 @@ const search = createApp({ src: "https://app.gter.net/image/miniApp/mp3/2.mp3", img: "./static/img/student-img-2.png", }, - { - src: "https://app.gter.net/image/miniApp/mp3/3.mp3", - img: "./static/img/student-img-3.png", - }, - { - src: "https://app.gter.net/image/miniApp/mp3/4.mp3", - img: "./static/img/student-img-4.png", - }, - { - src: "https://app.gter.net/image/miniApp/mp3/4.mp3", - img: "./static/img/student-img-5.png", - }, - { - src: "https://app.gter.net/image/miniApp/mp3/4.mp3", - img: "./static/img/student-img-6.png", - }, - { - src: "https://app.gter.net/image/miniApp/mp3/4.mp3", - img: "./static/img/student-img-7.png", - }, ]); const cutStudent = (order) => { // 找到目标元素和第一个元素 const [target, first] = [studentList.value.find((item) => item.order == order), studentList.value.find((item) => item.order == 0)]; // 交换order值 - if (target && first && target !== first) { - [target.order, first.order] = [first.order, target.order]; - } - }; + if (target && first && target !== first) [target.order, first.order] = [first.order, target.order]; - const generateRandomString = () => { - const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; - let result = ""; - const length = 6; - - for (let i = 0; i < length; i++) { - const randomIndex = Math.floor(Math.random() * chars.length); - result += chars.charAt(randomIndex); - } - - return result; + zeroOrderStudents.value = target; }; // 响应式数据：音量值、是否静音 @@ -467,7 +396,6 @@ const search = createApp({ url = url.indexOf("https://") == -1 ? projectBaseURL2 + url : url; - // url += objectToQueryString(data); return new Promise((resolve, reject) => { axios .get(url, { @@ -494,6 +422,6 @@ const search = createApp({ }); }; - return { changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward }; + return { zeroOrderStudents, rePlay, playData, awardAudioList, changeInterval, awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, formatTime, currentTimeFormatted, durationFormatted, worksRef, introduceRef, customList, closeAll, manageAudio, progress, closePreview, openPreview, previewState, audioPlayer, text, trait, fastForward }; }, }).mount("#appIndex");