feat: 重构音频播放功能并添加动态数据绑定
- 将硬编码的音频列表替换为从API获取的动态数据 - 添加播放进度同步功能，支持多个音频列表 - 实现底部播放器组件，显示当前播放曲目信息 - 优化学生列表切换逻辑，更新显示信息 - 移除冗余代码，简化音频管理逻辑
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user