A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 重构音频播放功能并添加动态数据绑定

Browse Source 
- 将硬编码的音频列表替换为从API获取的动态数据
- 添加播放进度同步功能，支持多个音频列表
- 实现底部播放器组件，显示当前播放曲目信息
- 优化学生列表切换逻辑，更新显示信息
- 移除冗余代码，简化音频管理逻辑
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-11 19:07:50 +08:00
parent f8a3096a72
commit cbcd7a501d
2 changed files with 93 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@@ -21,7 +21,7 @@
<audio ref="audioPlayer" preload="none" loop></audio>
<div class="introduce" ref="introduceRef">
<div class="sidebar flexflex">
<div class="sidebar flexflex" @mouseover="changeInterval(true)" @mouseleave="changeInterval(false)">
<div class="pointer">
<div class="item" v-for="(item,index) in bannerList" :class="{'active': pointerIndex === index}" :data-index="`0${ index + 1 }`" @click="changePointer(index)"></div>
</div>
@@ -107,27 +107,27 @@
</div>
<div class="audio-box mar1200 flexflex">
<div class="item" v-for="(item, index) in audioList" :key="index">
<div class="item" v-for="(item, index) in awardAudioList" :key="index">
<img class="serial-icon" src="./static/img/serial-icon.png" />
<div class="serial">{{ index + 1 }}</div>
<div class="content flexflex">
<div class="album">
<img class="img" src="./static/img/audio-img.png" />
<img class="img" :src="item.img" />
<img class="icon" src="./static/img/record-icon.png" />
</div>
<div class="info flexflex">
<div class="name">画Remix</div>
<div class="subtitle">AI音乐榜冠军</div>
<div class="time">2024.3</div>
<div class="name">{{ item.title }}</div>
<div class="subtitle">{{ item.desc }}</div>
<div class="time">{{ item.date }}</div>
<div class="progress-bar flexacenter">
<div class="bar white" :style="{ width: item.progress + '%' }"></div>
<div class="bar black flex1"></div>
</div>
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow', item.url, 'works')" />
<img class="speed left" src="./static/img/speed-left.png" @click="fastForward('slow', item.playurl, 'works')" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.url, 'works')" src="./static/img/play-black-icon.svg" />
<img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast', item.url, 'works')" />
<img v-else class="play" @click="manageAudio(item.playurl, 'works')" src="./static/img/play-black-icon.svg" />
<img class="speed right" src="./static/img/speed-right.png" @click="fastForward('fast', item.playurl, 'works')" />
</div>
</div>
</div>
@@ -143,21 +143,21 @@
<div class="list flexflex mar1200">
<div class="item flexacenter" v-for="(item, index) in customList" :key="index">
<div class="info flexflex">
<div class="name">画Remix</div>
<div class="lyric">走过的路汇成星河，脚下的路更辽阔</div>
<div class="name">{{ item.title }}</div>
<div class="lyric">{{ item.desc }}</div>
<div class="progress-bar flexacenter">
<div class="bar white" :style="{ width: item.progress + '%' }"></div>
<div class="bar black flex1"></div>
</div>
<div class="operate flexcenter">
<img class="speed left" @click="fastForward('slow', item.src, 'custom')" src="./static/img/speed-left.png" />
<img class="speed left" @click="fastForward('slow', item.playurl, 'custom')" src="./static/img/speed-left.png" />
<img v-if="item.state" class="play" @click="closeAll()" src="./static/img/pause-black-icon.svg" />
<img v-else class="play" @click="manageAudio(item.src, 'custom')" src="./static/img/play-black-icon.svg" />
<img class="speed right" @click="fastForward('fast', item.src, 'custom')" src="./static/img/speed-right.png" />
<img v-else class="play" @click="manageAudio(item.playurl, 'custom')" src="./static/img/play-black-icon.svg" />
<img class="speed right" @click="fastForward('fast', item.playurl, 'custom')" src="./static/img/speed-right.png" />
</div>
</div>
<img class="info-img" src="./static/img/custom-img.png" />
<img class="info-img" :src="item.img" />
</div>
</div>
<div class="bottom flexcenter">
@@ -174,10 +174,10 @@
<div class="list flexacenter">
<img class="img" :class="[`img${ item.order }`]" v-for="(item, index) in studentList" :src="item.img" :key="index" @click="cutStudent(item.order)" />
</div>
<div class="name">《听风少年的梦幻之城》</div>
<div class="name">《{{ zeroOrderStudents.title }}》</div>
<div class="info flexacenter">
<img class="icon" src="./static/img/student-icon.svg" />
林林林 | 7岁 | 广州
{{ zeroOrderStudents.name }} | {{ zeroOrderStudents.age }}岁 | {{ zeroOrderStudents.city }}
</div>
<div class="progress-bar flexacenter">
@@ -213,18 +213,18 @@
<div class="artplayer-app"></div>
</div>
<div class="bottom-play">
<div class="bottom-play" v-if="playData">
<div class="bottom-box mar1200 flexacenter">
<div class="left flexacenter">
<img class="img" src="./static/img/custom-img.png" />
<div class="name">你好，我是林林林</div>
<img class="img" :src="playData?.img" />
<div class="name">{{ playData?.title }}</div>
</div>
<div class="middle flex1 flexcenter">
<div class="operate flexcenter">
<img class="speed left" src="./static/img/speed-white-left.png" @click="fastForward('slow', url, 'works')" />
<img v-if="false" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="manageAudio(url, 'works')" src="./static/img/play-white-icon.svg" />
<img v-if="playData.state" class="play" @click="closeAll()" src="./static/img/pause-white-icon.svg" />
<img v-else class="play" @click="rePlay()" src="./static/img/play-white-icon.svg" />
<img class="speed right" src="./static/img/speed-white-right.png" @click="fastForward('fast', url, 'works')" />
</div>
<div class="flexacenter">

214
static/js/index.js
View File

@@ -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");