389 lines
14 KiB
JavaScript
389 lines
14 KiB
JavaScript
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
|
||
const search = createApp({
|
||
setup() {
|
||
const trait = [
|
||
{
|
||
icon: "./static/img/headset-icon.png",
|
||
title: "音乐创作",
|
||
text: "朴见潮音，2024 年成立于广州，是专注 AI 音乐领域的创新工作室。短短一年便跻身于AI音乐浪潮先锋品牌！",
|
||
},
|
||
{
|
||
icon: "./static/img/mv-icon.png",
|
||
title: "MV创作",
|
||
text: "以 AI 技术为核心，整合音乐创作、MV 制作、教学培训、发行级重制等业务，为创作者和爱好者打造一站式平台。",
|
||
},
|
||
{
|
||
icon: "./static/img/train-icon.png",
|
||
title: "教学培训",
|
||
text: "工作室运用多种 AI 工具，突破传统创作局限，支持流行、摇滚等多元风格创作，满足个性化需求。",
|
||
},
|
||
{
|
||
icon: "./static/img/remake-icon.png",
|
||
title: "发行级重制",
|
||
text: "构建全流程服务体系，从 AI 音乐创作、MV 视觉呈现，到零基础教学，再到发行级重制提升品质，实现作品价值最大化。",
|
||
},
|
||
];
|
||
|
||
const text = `中国AIGC产业联盟（AIGCxChina）
|
||
温州市社科联
|
||
温州市新闻媒体中心
|
||
第一届AI音乐春晚 正选节目`;
|
||
|
||
const audioPlayer = ref(null);
|
||
|
||
const progress = ref(20); // 播放进度百分比
|
||
// 更新进度的函数
|
||
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 setProgress = (val, src) => {
|
||
audioList.value.forEach((item) => {
|
||
if (item.url === src) item.progress = val;
|
||
});
|
||
|
||
customList.value.forEach((item) => {
|
||
if (item.src === src) item.progress = val;
|
||
});
|
||
};
|
||
|
||
const introduceRef = ref(null);
|
||
const worksRef = ref(null);
|
||
const customRef = ref(null);
|
||
const studentRef = ref(null);
|
||
|
||
let pointerState = ref("introduce");
|
||
|
||
const elements = ref([
|
||
{
|
||
isVisible: false,
|
||
ref: introduceRef,
|
||
title: "介绍",
|
||
state: "introduce",
|
||
},
|
||
{
|
||
isVisible: false,
|
||
ref: worksRef,
|
||
title: "作品",
|
||
state: "works",
|
||
},
|
||
{
|
||
isVisible: false,
|
||
ref: customRef,
|
||
title: "定制",
|
||
state: "custom",
|
||
},
|
||
{
|
||
isVisible: false,
|
||
ref: studentRef,
|
||
title: "学生",
|
||
state: "student",
|
||
},
|
||
]);
|
||
|
||
// 点击侧边栏
|
||
const changePointer = (state) => {
|
||
const element = document.querySelector(`.${state}`);
|
||
|
||
if (!element) return;
|
||
element.scrollIntoView({
|
||
behavior: "smooth",
|
||
});
|
||
};
|
||
|
||
// 向上滚动到上一页
|
||
const scrollToPrevious = () => {
|
||
const currentIndex = ["introduce", "works", "custom", "student"].indexOf(pointerState.value);
|
||
if (currentIndex > 0) {
|
||
const prevState = ["introduce", "works", "custom", "student"][currentIndex - 1];
|
||
changePointer(prevState);
|
||
}
|
||
};
|
||
|
||
// 向下滚动到下一页
|
||
const scrollToNext = () => {
|
||
const currentIndex = ["introduce", "works", "custom", "student"].indexOf(pointerState.value);
|
||
if (currentIndex < 3) {
|
||
const nextState = ["introduce", "works", "custom", "student"][currentIndex + 1];
|
||
changePointer(nextState);
|
||
}
|
||
};
|
||
|
||
// 获取当前在可视窗口中的元素ref
|
||
const visibleRef = computed(() => {
|
||
const visibleElement = elements.value.find((el) => el.isVisible);
|
||
return visibleElement ? visibleElement.ref : null;
|
||
});
|
||
|
||
const observer = ref(null);
|
||
|
||
// 初始化观察器
|
||
const initObserver = () => {
|
||
observer.value = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
// 找到对应的元素状态并更新
|
||
const targetEl = elements.value.find((el) => el.ref === entry.target);
|
||
if (targetEl) {
|
||
targetEl.isVisible = entry.isIntersecting;
|
||
if (entry.isIntersecting) pointerState.value = targetEl.state;
|
||
}
|
||
});
|
||
},
|
||
{
|
||
root: null, // 视口作为根元素
|
||
rootMargin: "0px",
|
||
threshold: 0.3, // 可见比例达到10%时触发
|
||
}
|
||
);
|
||
|
||
// 开启监听 - 对所有预定义的元素执行observe
|
||
elements.value.forEach((element) => {
|
||
if (element.ref && element.ref) observer.value.observe(element.ref);
|
||
});
|
||
|
||
console.log(observer.value);
|
||
};
|
||
|
||
onMounted(() => {
|
||
setTimeout(() => initObserver(), 1000);
|
||
|
||
// 添加进度更新事件监听器
|
||
if (audioPlayer.value) {
|
||
audioPlayer.value.addEventListener("timeupdate", getProgress);
|
||
audioPlayer.value.addEventListener("loadedmetadata", getProgress);
|
||
}
|
||
|
||
studentList.value.forEach((item, index) => {
|
||
item["order"] = index;
|
||
// item["random"] = generateRandomString();
|
||
});
|
||
});
|
||
|
||
// 组件卸载时清理事件监听器
|
||
onUnmounted(() => {
|
||
observer.value?.disconnect();
|
||
|
||
audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
|
||
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);
|
||
|
||
let art = null;
|
||
// 开启播放 MV
|
||
const openPreview = () => {
|
||
previewState.value = true;
|
||
nextTick(() => {
|
||
art = new Artplayer({
|
||
container: ".artplayer-app",
|
||
url: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-JoqdX_qqsgFptxhcq_cQnrlc6Z1CwMUBq_D-81qNDQyOQ~~",
|
||
autoplay: true,
|
||
poster: "https://o.x-php.com/thumb/UHkZOgUVDvP9z7rPV2rT1kE22Zf1QEiLggt9OPnf5hC7a-QU5l8VTqiP5awMLv2DMEUiOUl03dK1PW0Yzf8ZPfpa7ZTTgV-PZGNjZQ~~",
|
||
});
|
||
art.play();
|
||
});
|
||
};
|
||
|
||
// 关闭播放 MV
|
||
const closePreview = () => {
|
||
previewState.value = false;
|
||
art?.destroy();
|
||
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;
|
||
console.log("src", src, "audioPlayer", audioPlayer.value);
|
||
if (audioPlayer.value.src != src) {
|
||
manageAudio(src, area);
|
||
return;
|
||
}
|
||
|
||
let currentTime = audioPlayer.value.currentTime || 0;
|
||
const duration = audioPlayer.value.duration || 0;
|
||
let newTime = 0;
|
||
if (type == "fast") newTime = Math.min(currentTime + 10, duration);
|
||
else newTime = Math.max(currentTime - 10, 0);
|
||
audioPlayer.value.currentTime = newTime;
|
||
getProgress();
|
||
};
|
||
|
||
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 (area == "works") {
|
||
if (audio?.src != src) audio.src = src;
|
||
audio.play().then(() => {
|
||
audioList.value.forEach((item) => {
|
||
if (item.url == src) item["state"] = true;
|
||
});
|
||
});
|
||
}
|
||
|
||
console.log("area", area, src);
|
||
|
||
if (area == "custom") {
|
||
if (audio?.src != src) audio.src = src;
|
||
audio.play().then(() => {
|
||
customList.value.forEach((item) => {
|
||
if (item.src == src) item["state"] = true;
|
||
});
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const closeAll = () => {
|
||
audioPlayer.value.pause();
|
||
audioHeadState.value = false;
|
||
audioList.value.forEach((item) => {
|
||
item["progress"] = 0;
|
||
item["state"] = false;
|
||
});
|
||
customList.value.forEach((item) => {
|
||
item["progress"] = 0;
|
||
item["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 studentIndex = ref(0);
|
||
|
||
let studentList = ref([
|
||
{
|
||
src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
|
||
img: "./static/img/student-img.png",
|
||
},
|
||
{
|
||
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];
|
||
}
|
||
};
|
||
|
||
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;
|
||
};
|
||
|
||
return { cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerState, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
|
||
},
|
||
}).mount("#appIndex");
|