feat(guess): 添加猜歌游戏页面及功能实现
- 新增猜歌游戏HTML页面结构 - 实现Vue.js猜歌游戏逻辑 - 添加游戏相关图片资源 - 完善CSS样式和动画效果 - 添加音乐数据JSON文件 - 更新歌曲请求站点的JS逻辑
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -222,6 +222,7 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container .container-box .details::after {
|
||||
content: "";
|
||||
@@ -272,7 +273,9 @@
|
||||
.container .container-box .details .start-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.container .container-box .details .start-box .microphone {
|
||||
width: 326px;
|
||||
@@ -304,3 +307,187 @@
|
||||
left: 517px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container .container-box .details .answer-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
align-items: center;
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
left: 100%;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.container .container-box .details .answer-box .figure {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.container .container-box .details .answer-box.answer-0 .list .item:not(:last-of-type) {
|
||||
margin-right: 175px;
|
||||
}
|
||||
.container .container-box .details .answer-box.answer-1 .list .item:not(:last-of-type) {
|
||||
margin-right: 103px;
|
||||
}
|
||||
.container .container-box .details .answer-box.answer-2 .list .item:not(:last-of-type) {
|
||||
margin-right: 78px;
|
||||
}
|
||||
.container .container-box .details .answer-box .list {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.container .container-box .details .answer-box .list .item {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container .container-box .details .answer-box .list .item .img {
|
||||
width: 200px;
|
||||
height: 212px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.container .container-box .details .answer-box .list .item .icon {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container .container-box .details .answer-box .list .item .select-me {
|
||||
width: 150px;
|
||||
height: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.container .container-box .details .answer-box .text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.container .container-box .details .masking {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container .container-box .details .masking .hint-box {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
height: 64px;
|
||||
padding-left: 18px;
|
||||
border-radius: 60px;
|
||||
padding-right: 27px;
|
||||
}
|
||||
.container .container-box .details .masking .hint-box::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(100% - 9px);
|
||||
height: calc(100% - 9px);
|
||||
background: linear-gradient(180deg, #4a28b0 0%, #7d4bf8 100%);
|
||||
z-index: -1;
|
||||
border-radius: 60px;
|
||||
}
|
||||
.container .container-box .details .masking .hint-box .like {
|
||||
width: 82px;
|
||||
height: 88px;
|
||||
position: relative;
|
||||
}
|
||||
.container .container-box .details .masking .hint-box .like .icon {
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -3px;
|
||||
width: 92px;
|
||||
height: 98px;
|
||||
}
|
||||
.container .container-box .details .masking .hint-box .text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.container .container-box .details .reply {
|
||||
justify-content: center;
|
||||
}
|
||||
.container .container-box .details .win {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.container .container-box .details .win .win-icon {
|
||||
width: 209px;
|
||||
height: 200px;
|
||||
}
|
||||
.container .container-box .details .win .index-btn {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #642501;
|
||||
text-align: center;
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.container .container-box .details .win .index-btn .index-icon {
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
/* 入场动画 */
|
||||
.slide-right-enter-from {
|
||||
/* 入场开始位置：向左偏移自身宽度 */
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-right-enter-active {
|
||||
/* 入场动画：向右移动到原位 */
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
.slide-right-enter-to {
|
||||
/* 入场结束位置：不偏移 */
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
/* 退场动画 */
|
||||
.slide-right-leave-from {
|
||||
/* 退场开始位置：不偏移 */
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.slide-right-leave-active {
|
||||
/* 退场动画：向右移动到自身宽度外 */
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
.slide-right-leave-to {
|
||||
/* 退场结束位置：向右偏移自身宽度 */
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
/* 列表排序动画（可选） */
|
||||
.slide-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -246,6 +246,7 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@@ -303,7 +304,9 @@
|
||||
.start-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.microphone {
|
||||
width: 326px;
|
||||
height: 326px;
|
||||
@@ -338,6 +341,229 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.answer-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
align-items: center;
|
||||
// animation: fadeInUp 3s ease forwards;
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.figure {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
&.answer-0 {
|
||||
.list .item {
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 175px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.answer-1 {
|
||||
.list .item {
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 103px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.answer-2 {
|
||||
.list .item {
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 78px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-bottom: 13px;
|
||||
.item {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.img {
|
||||
width: 200px;
|
||||
height: 212px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-me {
|
||||
width: 150px;
|
||||
height: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.masking {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to bottom, rgba(51, 51, 51, 0.2), rgba(0, 0, 0, 0.898));
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.hint-box {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 3px;
|
||||
height: 64px;
|
||||
padding-left: 18px;
|
||||
border-radius: 60px;
|
||||
padding-right: 27px;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(100% - 9px);
|
||||
height: calc(100% - 9px);
|
||||
background: linear-gradient(180deg, #4a28b0 0%, #7d4bf8 100%);
|
||||
z-index: -1;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
.like {
|
||||
width: 82px;
|
||||
height: 88px;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -3px;
|
||||
width: 92px;
|
||||
height: 98px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.win {
|
||||
justify-content: space-between;
|
||||
.win-icon {
|
||||
width: 209px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.index-btn {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #642501;
|
||||
text-align: center;
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
.index-icon {
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 入场动画 */
|
||||
.slide-right-enter-from {
|
||||
/* 入场开始位置：向左偏移自身宽度 */
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-right-enter-active {
|
||||
/* 入场动画：向右移动到原位 */
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.slide-right-enter-to {
|
||||
/* 入场结束位置：不偏移 */
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 退场动画 */
|
||||
.slide-right-leave-from {
|
||||
/* 退场开始位置：不偏移 */
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slide-right-leave-active {
|
||||
/* 退场动画：向右移动到自身宽度外 */
|
||||
transition: transform 0.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.slide-right-leave-to {
|
||||
/* 退场结束位置：向右偏移自身宽度 */
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 列表排序动画（可选） */
|
||||
.slide-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
13
static/img/guess/index-icon.svg
Normal file
13
static/img/guess/index-icon.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="192px" height="40px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="991" y1="5340" x2="991" y2="5305" id="LinearGradient342">
|
||||
<stop id="Stop343" stop-color="#c3454c" offset="0" />
|
||||
<stop id="Stop344" stop-color="#eea058" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -864 -5302 )">
|
||||
<path d="M 867.200096152402 5322 L 877.400096152402 5305 L 1042.5999038476 5305 L 1052.7999038476 5322 L 1042.5999038476 5339 L 877.400096152402 5339 L 867.200096152402 5322 Z " fill-rule="nonzero" fill="url(#LinearGradient342)" stroke="none" />
|
||||
<path d="M 864 5322 L 876 5302 L 1044 5302 L 1056 5322 L 1044 5342 L 876 5342 L 864 5322 Z M 877.400096152402 5305 L 867.200096152402 5322 L 877.400096152402 5339 L 1042.5999038476 5339 L 1052.7999038476 5322 L 1042.5999038476 5305 L 877.400096152402 5305 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.215686274509804" />
|
||||
</g>
|
||||
</svg>
|
||||
18
static/img/guess/like-icon.svg
Normal file
18
static/img/guess/like-icon.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
static/img/guess/regret-icon.png
Normal file
BIN
static/img/guess/regret-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
static/img/guess/select-me.png
Normal file
BIN
static/img/guess/select-me.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
static/img/guess/treasure-1.png
Normal file
BIN
static/img/guess/treasure-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 582 KiB |
BIN
static/img/guess/treasure-2.png
Normal file
BIN
static/img/guess/treasure-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 520 KiB |
BIN
static/img/guess/treasure-3.png
Normal file
BIN
static/img/guess/treasure-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 542 KiB |
BIN
static/img/guess/treasure-4.png
Normal file
BIN
static/img/guess/treasure-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 582 KiB |
BIN
static/img/guess/win-icon.png
Normal file
BIN
static/img/guess/win-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
46
static/js/guess.js
Normal file
46
static/js/guess.js
Normal file
@@ -0,0 +1,46 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
|
||||
const search = createApp({
|
||||
setup() {
|
||||
const musicData = ref([
|
||||
["A组 世界在转动.MP3", "A组《来吧，占领我的无私》"],
|
||||
["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
|
||||
["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
|
||||
]);
|
||||
|
||||
let step = ref(0); // null 是未开始 0 是第一题
|
||||
|
||||
onMounted(() => {
|
||||
console.log("init");
|
||||
init();
|
||||
});
|
||||
|
||||
const init = () => {
|
||||
// 将 musicData 里的 二维值打乱
|
||||
musicData.value.forEach((item) => {
|
||||
item.sort(() => Math.random() - 0.5);
|
||||
});
|
||||
|
||||
console.log(musicData.value);
|
||||
};
|
||||
|
||||
const begin = () => {
|
||||
step.value = 0;
|
||||
};
|
||||
|
||||
// 添加一个方法来切换到下一题
|
||||
const nextStep = () => {
|
||||
if (step.value < musicData.value.length - 1) {
|
||||
step.value++;
|
||||
} else {
|
||||
// 所有问题都回答完毕，可以重置或显示结果
|
||||
// step.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const play = (item) => {
|
||||
console.log("item", item);
|
||||
};
|
||||
|
||||
return { play, step, begin, musicData, nextStep };
|
||||
},
|
||||
}).mount("#guess");
|
||||
406
static/js/musicData.json
Normal file
406
static/js/musicData.json
Normal file
@@ -0,0 +1,406 @@
|
||||
{
|
||||
"code": 200,
|
||||
"data": [
|
||||
{
|
||||
"tag": "彩虹泡泡",
|
||||
"songs": [
|
||||
{ "name": "彩虹的微笑", "path": "/music/rainbow_smile.mp3" },
|
||||
{ "name": "泡泡飞舞", "path": "/music/bubble_dance.mp3" },
|
||||
{ "name": "七彩梦境", "path": "/music/colorful_dream.mp3" },
|
||||
{ "name": "泡泡糖世界", "path": "/music/bubblegum_world.mp3" },
|
||||
{ "name": "彩虹之光", "path": "/music/rainbow_light.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "星际漫游",
|
||||
"songs": [
|
||||
{ "name": "银河漫步", "path": "/music/galaxy_walk.mp3" },
|
||||
{ "name": "宇宙之旅", "path": "/music/space_journey.mp3" },
|
||||
{ "name": "星际迷航", "path": "/music/star_trek.mp3" },
|
||||
{ "name": "太空漫步", "path": "/music/space_walk.mp3" },
|
||||
{ "name": "银河系边缘", "path": "/music/galaxy_edge.mp3" },
|
||||
{ "name": "星际穿越", "path": "/music/interstellar.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "开心到飞起",
|
||||
"songs": [
|
||||
{ "name": "快乐飞翔", "path": "/music/happy_flying.mp3" },
|
||||
{ "name": "笑到飞起", "path": "/music/laugh_high.mp3" },
|
||||
{ "name": "开心每一天", "path": "/music/happy_everyday.mp3" },
|
||||
{ "name": "飞向快乐", "path": "/music/fly_to_happy.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "甜蜜时光",
|
||||
"songs": [
|
||||
{ "name": "甜蜜约定", "path": "/music/sweet_promise.mp3" },
|
||||
{ "name": "时光慢递", "path": "/music/slow_time.mp3" },
|
||||
{ "name": "甜蜜回忆", "path": "/music/sweet_memory.mp3" },
|
||||
{ "name": "蜜糖时光", "path": "/music/honey_time.mp3" },
|
||||
{ "name": "温柔时刻", "path": "/music/gentle_moment.mp3" },
|
||||
{ "name": "甜蜜陪伴", "path": "/music/sweet_company.mp3" },
|
||||
{ "name": "幸福时光", "path": "/music/happy_time.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "探险",
|
||||
"songs": [
|
||||
{ "name": "丛林探险", "path": "/music/jungle_adventure.mp3" },
|
||||
{ "name": "未知旅程", "path": "/music/unknown_journey.mp3" },
|
||||
{ "name": "探索新世界", "path": "/music/explore_new_world.mp3" },
|
||||
{ "name": "勇往直前", "path": "/music/brave_forward.mp3" },
|
||||
{ "name": "神秘岛屿", "path": "/music/mystery_island.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "梦幻",
|
||||
"songs": [
|
||||
{ "name": "梦幻旋律", "path": "/music/dream_melody.mp3" },
|
||||
{ "name": "幻想曲", "path": "/music/fantasy.mp3" },
|
||||
{ "name": "梦中的世界", "path": "/music/dream_world.mp3" },
|
||||
{ "name": "梦幻泡影", "path": "/music/dream_bubble.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "幻想曲",
|
||||
"songs": [
|
||||
{ "name": "幻想交响曲", "path": "/music/fantasy_symphony.mp3" },
|
||||
{ "name": "幻想即兴曲", "path": "/music/fantasy_impromptu.mp3" },
|
||||
{ "name": "幻想变奏曲", "path": "/music/fantasy_variations.mp3" },
|
||||
{ "name": "幻想小夜曲", "path": "/music/fantasy_serenade.mp3" },
|
||||
{ "name": "幻想曲集", "path": "/music/fantasy_collection.mp3" },
|
||||
{ "name": "幻想奏鸣曲", "path": "/music/fantasy_sonata.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "自由摇摆",
|
||||
"songs": [
|
||||
{ "name": "自由舞动", "path": "/music/free_dance.mp3" },
|
||||
{ "name": "摇摆节奏", "path": "/music/swing_rhythm.mp3" },
|
||||
{ "name": "自由爵士", "path": "/music/free_jazz.mp3" },
|
||||
{ "name": "摇摆人生", "path": "/music/swing_life.mp3" },
|
||||
{ "name": "自由即兴", "path": "/music/free_improvisation.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "夏日狂欢",
|
||||
"songs": [
|
||||
{ "name": "夏日派对", "path": "/music/summer_party.mp3" },
|
||||
{ "name": "阳光沙滩", "path": "/music/sunny_beach.mp3" },
|
||||
{ "name": "海边狂欢", "path": "/music/beach_carnival.mp3" },
|
||||
{ "name": "夏日冰饮", "path": "/music/summer_drink.mp3" },
|
||||
{ "name": "热带风情", "path": "/music/tropical_style.mp3" },
|
||||
{ "name": "夏夜星空", "path": "/music/summer_night_sky.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "微风轻轻吹",
|
||||
"songs": [
|
||||
{ "name": "微风拂面", "path": "/music/breeze_face.mp3" },
|
||||
{ "name": "轻风细雨", "path": "/music/gentle_rain.mp3" },
|
||||
{ "name": "风中絮语", "path": "/music/wind_whisper.mp3" },
|
||||
{ "name": "微风山谷", "path": "/music/breeze_valley.mp3" },
|
||||
{ "name": "风的私语", "path": "/music/wind_secret.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "江湖",
|
||||
"songs": [
|
||||
{ "name": "侠客行", "path": "/music/knight_journey.mp3" },
|
||||
{ "name": "刀剑如梦", "path": "/music/sword_dream.mp3" },
|
||||
{ "name": "笑傲江湖", "path": "/music/laugh_jianghu.mp3" },
|
||||
{ "name": "侠义情深", "path": "/music/knight_love.mp3" },
|
||||
{ "name": "江湖夜雨", "path": "/music/jianghu_night_rain.mp3" },
|
||||
{ "name": "沧海一声笑", "path": "/music/sea_laugh.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "浪漫",
|
||||
"songs": [
|
||||
{ "name": "浪漫星空", "path": "/music/romantic_sky.mp3" },
|
||||
{ "name": "浪漫时光", "path": "/music/romantic_time.mp3" },
|
||||
{ "name": "浪漫邂逅", "path": "/music/romantic_encounter.mp3" },
|
||||
{ "name": "浪漫旋律", "path": "/music/romantic_melody.mp3" },
|
||||
{ "name": "浪漫之夜", "path": "/music/romantic_night.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "阳光正好",
|
||||
"songs": [
|
||||
{ "name": "阳光灿烂", "path": "/music/sunshine_bright.mp3" },
|
||||
{ "name": "正好遇见你", "path": "/music/just_meet_you.mp3" },
|
||||
{ "name": "阳光路上", "path": "/music/sunshine_road.mp3" },
|
||||
{ "name": "温暖阳光", "path": "/music/warm_sunshine.mp3" },
|
||||
{ "name": "阳光照进心里", "path": "/music/sunshine_heart.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "青草香",
|
||||
"songs": [
|
||||
{ "name": "草原晨曲", "path": "/music/grassland_morning.mp3" },
|
||||
{ "name": "青草地", "path": "/music/grass_land.mp3" },
|
||||
{ "name": "草香四溢", "path": "/music/grass_fragrance.mp3" },
|
||||
{ "name": "青草摇曳", "path": "/music/grass_swing.mp3" },
|
||||
{ "name": "草原牧歌", "path": "/music/grassland_song.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "赛博心跳",
|
||||
"songs": [
|
||||
{ "name": "电子脉冲", "path": "/music/electronic_pulse.mp3" },
|
||||
{ "name": "数字心跳", "path": "/music/digital_heartbeat.mp3" },
|
||||
{ "name": "机械律动", "path": "/music/mechanical_rhythm.mp3" },
|
||||
{ "name": "电流涌动", "path": "/music/current_surge.mp3" },
|
||||
{ "name": "赛博都市", "path": "/music/cyber_city.mp3" },
|
||||
{ "name": "数据流", "path": "/music/data_flow.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "赛博空间",
|
||||
"songs": [
|
||||
{ "name": "虚拟现实", "path": "/music/virtual_reality.mp3" },
|
||||
{ "name": "网络漫游", "path": "/music/network_roaming.mp3" },
|
||||
{ "name": "数据海洋", "path": "/music/data_ocean.mp3" },
|
||||
{ "name": "赛博迷宫", "path": "/music/cyber_maze.mp3" },
|
||||
{ "name": "电子宇宙", "path": "/music/electronic_universe.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "节奏大师",
|
||||
"songs": [
|
||||
{ "name": "节奏之王", "path": "/music/rhythm_king.mp3" },
|
||||
{ "name": "鼓点狂欢", "path": "/music/drum_carnival.mp3" },
|
||||
{ "name": "节奏游戏", "path": "/music/rhythm_game.mp3" },
|
||||
{ "name": "律动人生", "path": "/music/rhythm_life.mp3" },
|
||||
{ "name": "节奏与灵魂", "path": "/music/rhythm_soul.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "快乐节拍",
|
||||
"songs": [
|
||||
{ "name": "欢乐节拍", "path": "/music/happy_beat.mp3" },
|
||||
{ "name": "快乐舞曲", "path": "/music/happy_dance.mp3" },
|
||||
{ "name": "节拍欢歌", "path": "/music/beat_song.mp3" },
|
||||
{ "name": "快乐音符", "path": "/music/happy_note.mp3" },
|
||||
{ "name": "跳跃节奏", "path": "/music/jumping_rhythm.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "自由鼓点",
|
||||
"songs": [
|
||||
{ "name": "自由敲击", "path": "/music/free_hit.mp3" },
|
||||
{ "name": "鼓点狂想", "path": "/music/drum_fantasy.mp3" },
|
||||
{ "name": "自由节奏", "path": "/music/free_rhythm.mp3" },
|
||||
{ "name": "鼓点即兴", "path": "/music/drum_improvisation.mp3" },
|
||||
{ "name": "自由打击", "path": "/music/free_percussion.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "悲伤的角落",
|
||||
"songs": [
|
||||
{ "name": "角落里的泪", "path": "/music/corner_tears.mp3" },
|
||||
{ "name": "悲伤回忆", "path": "/music/sad_memory.mp3" },
|
||||
{ "name": "孤独空间", "path": "/music/lonely_space.mp3" },
|
||||
{ "name": "泪的痕迹", "path": "/music/tear_trace.mp3" },
|
||||
{ "name": "心碎角落", "path": "/music/heartbreak_corner.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "一个人的狂欢",
|
||||
"songs": [
|
||||
{ "name": "独自狂欢", "path": "/music/alone_carnival.mp3" },
|
||||
{ "name": "一人派对", "path": "/music/one_person_party.mp3" },
|
||||
{ "name": "孤独欢乐", "path": "/music/lonely_joy.mp3" },
|
||||
{ "name": "一个人的舞台", "path": "/music/one_person_stage.mp3" },
|
||||
{ "name": "独自摇摆", "path": "/music/alone_swing.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "经典金曲",
|
||||
"songs": [
|
||||
{ "name": "永恒经典", "path": "/music/eternal_classic.mp3" },
|
||||
{ "name": "金曲回放", "path": "/music/golden_replay.mp3" },
|
||||
{ "name": "不朽名曲", "path": "/music/immortal_song.mp3" },
|
||||
{ "name": "经典重现", "path": "/music/classic_reproduction.mp3" },
|
||||
{ "name": "金曲珍藏", "path": "/music/golden_collection.mp3" },
|
||||
{ "name": "经典传承", "path": "/music/classic_inheritance.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "民谣",
|
||||
"songs": [
|
||||
{ "name": "乡间小路", "path": "/music/country_road.mp3" },
|
||||
{ "name": "吉他与诗", "path": "/music/guitar_poem.mp3" },
|
||||
{ "name": "民谣故事", "path": "/music/folk_story.mp3" },
|
||||
{ "name": "城市民谣", "path": "/music/city_folk.mp3" },
|
||||
{ "name": "民谣之声", "path": "/music/folk_voice.mp3" },
|
||||
{ "name": "木吉他旋律", "path": "/music/acoustic_melody.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "摇滚",
|
||||
"songs": [
|
||||
{ "name": "摇滚精神", "path": "/music/rock_spirit.mp3" },
|
||||
{ "name": "电吉他之声", "path": "/music/electric_guitar.mp3" },
|
||||
{ "name": "摇滚革命", "path": "/music/rock_revolution.mp3" },
|
||||
{ "name": "硬摇滚", "path": "/music/hard_rock.mp3" },
|
||||
{ "name": "摇滚青春", "path": "/music/rock_youth.mp3" },
|
||||
{ "name": "摇滚传奇", "path": "/music/rock_legend.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "古风",
|
||||
"songs": [
|
||||
{ "name": "千年之约", "path": "/music/thousand_year_promise.mp3" },
|
||||
{ "name": "墨香古韵", "path": "/music/ink_ancient_rhyme.mp3" },
|
||||
{ "name": "青丝白发", "path": "/music/black_white_hair.mp3" },
|
||||
{ "name": "琴瑟和鸣", "path": "/music/instruments_harmony.mp3" },
|
||||
{ "name": "长安忆", "path": "/music/changan_memory.mp3" },
|
||||
{ "name": "山水清音", "path": "/music/landscape_sound.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "去旅行",
|
||||
"songs": [
|
||||
{ "name": "旅行的意义", "path": "/music/travel_meaning.mp3" },
|
||||
{ "name": "背包客", "path": "/music/backpacker.mp3" },
|
||||
{ "name": "远方的呼唤", "path": "/music/distant_call.mp3" },
|
||||
{ "name": "旅途中", "path": "/music/on_journey.mp3" },
|
||||
{ "name": "出发吧", "path": "/music/lets_go.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "在路上",
|
||||
"songs": [
|
||||
{ "name": "公路之歌", "path": "/music/highway_song.mp3" },
|
||||
{ "name": "一路向前", "path": "/music/forward.mp3" },
|
||||
{ "name": "旅途风景", "path": "/music/journey_scenery.mp3" },
|
||||
{ "name": "在路上", "path": "/music/on_the_road.mp3" },
|
||||
{ "name": "行走的力量", "path": "/music/walking_power.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "学习BGM",
|
||||
"songs": [
|
||||
{ "name": "专注时刻", "path": "/music/focus_moment.mp3" },
|
||||
{ "name": "学习氛围", "path": "/music/study_atmosphere.mp3" },
|
||||
{ "name": "思考空间", "path": "/music/thinking_space.mp3" },
|
||||
{ "name": "安静阅读", "path": "/music/quiet_reading.mp3" },
|
||||
{ "name": "效率提升", "path": "/music/efficiency_improvement.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "运动健身",
|
||||
"songs": [
|
||||
{ "name": "热血沸腾", "path": "/music/hot_blood.mp3" },
|
||||
{ "name": "健身节奏", "path": "/music/fitness_rhythm.mp3" },
|
||||
{ "name": "运动激情", "path": "/music/sports_passion.mp3" },
|
||||
{ "name": "跑步节拍", "path": "/music/running_beat.mp3" },
|
||||
{ "name": "力量训练", "path": "/music/strength_training.mp3" },
|
||||
{ "name": "健身房热曲", "path": "/music/gym_hot_song.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "派对聚会",
|
||||
"songs": [
|
||||
{ "name": "派对之王", "path": "/music/party_king.mp3" },
|
||||
{ "name": "聚会舞曲", "path": "/music/party_dance.mp3" },
|
||||
{ "name": "欢乐时光", "path": "/music/happy_time.mp3" },
|
||||
{ "name": "派对节奏", "path": "/music/party_rhythm.mp3" },
|
||||
{ "name": "狂欢之夜", "path": "/music/carnival_night.mp3" },
|
||||
{ "name": "聚会必备", "path": "/music/party_essential.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "约会浪漫",
|
||||
"songs": [
|
||||
{ "name": "浪漫晚餐", "path": "/music/romantic_dinner.mp3" },
|
||||
{ "name": "约会之夜", "path": "/music/date_night.mp3" },
|
||||
{ "name": "烛光晚餐", "path": "/music/candle_dinner.mp3" },
|
||||
{ "name": "浪漫时刻", "path": "/music/romantic_moment.mp3" },
|
||||
{ "name": "甜蜜约会", "path": "/music/sweet_date.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "旅行路上",
|
||||
"songs": [
|
||||
{ "name": "旅途风景", "path": "/music/journey_scenery.mp3" },
|
||||
{ "name": "公路之歌", "path": "/music/highway_song.mp3" },
|
||||
{ "name": "旅行日记", "path": "/music/travel_diary.mp3" },
|
||||
{ "name": "异国风情", "path": "/music/exotic_style.mp3" },
|
||||
{ "name": "旅途中的歌", "path": "/music/song_on_journey.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "助眠放松",
|
||||
"songs": [
|
||||
{ "name": "深度睡眠", "path": "/music/deep_sleep.mp3" },
|
||||
{ "name": "轻松入眠", "path": "/music/easy_sleep.mp3" },
|
||||
{ "name": "安眠曲", "path": "/music/lullaby.mp3" },
|
||||
{ "name": "夜晚静谧", "path": "/music/night_quiet.mp3" },
|
||||
{ "name": "舒缓心灵", "path": "/music/soothe_mind.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "专注工作/学习",
|
||||
"songs": [
|
||||
{ "name": "专注时刻", "path": "/music/focus_moment.mp3" },
|
||||
{ "name": "高效工作", "path": "/music/efficient_work.mp3" },
|
||||
{ "name": "思维空间", "path": "/music/thinking_space.mp3" },
|
||||
{ "name": "学习氛围", "path": "/music/study_atmosphere.mp3" },
|
||||
{ "name": "专注力提升", "path": "/music/focus_improvement.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "通勤路上",
|
||||
"songs": [
|
||||
{ "name": "早晨通勤", "path": "/music/morning_commute.mp3" },
|
||||
{ "name": "城市节奏", "path": "/music/city_rhythm.mp3" },
|
||||
{ "name": "地铁之声", "path": "/music/subway_sound.mp3" },
|
||||
{ "name": "公交旅程", "path": "/music/bus_journey.mp3" },
|
||||
{ "name": "上下班音乐", "path": "/music/commute_music.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "解压宣泄",
|
||||
"songs": [
|
||||
{ "name": "压力释放", "path": "/music/pressure_release.mp3" },
|
||||
{ "name": "情绪宣泄", "path": "/music/emotion_vent.mp3" },
|
||||
{ "name": "怒吼一声", "path": "/music/roar.mp3" },
|
||||
{ "name": "释放自我", "path": "/music/release_self.mp3" },
|
||||
{ "name": "压力消除", "path": "/music/pressure_elimination.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "生日祝福",
|
||||
"songs": [
|
||||
{ "name": "生日快乐", "path": "/music/happy_birthday.mp3" },
|
||||
{ "name": "温馨祝福", "path": "/music/warm_blessing.mp3" },
|
||||
{ "name": "生日派对", "path": "/music/birthday_party.mp3" },
|
||||
{ "name": "祝福之歌", "path": "/music/blessing_song.mp3" },
|
||||
{ "name": "幸福时刻", "path": "/music/happy_moment.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "影视配乐",
|
||||
"songs": [
|
||||
{ "name": "电影主题", "path": "/music/movie_theme.mp3" },
|
||||
{ "name": "剧情转折", "path": "/music/plot_twist.mp3" },
|
||||
{ "name": "情感渲染", "path": "/music/emotion_rendering.mp3" },
|
||||
{ "name": "史诗场景", "path": "/music/epic_scene.mp3" },
|
||||
{ "name": "温情时刻", "path": "/music/warm_moment.mp3" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"tag": "绘本音乐",
|
||||
"songs": [
|
||||
{ "name": "童话世界", "path": "/music/fairy_tale_world.mp3" },
|
||||
{ "name": "绘本旋律", "path": "/music/picture_book_melody.mp3" },
|
||||
{ "name": "想象空间", "path": "/music/imagination_space.mp3" },
|
||||
{ "name": "童年回忆", "path": "/music/childhood_memory.mp3" },
|
||||
{ "name": "故事音乐", "path": "/music/story_music.mp3" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -18,68 +18,457 @@ const search = createApp({
|
||||
|
||||
// 初始创建标签
|
||||
const init = () => {
|
||||
fetch("./static/js/music.json")
|
||||
.then((response) => {
|
||||
if (!response.ok) throw new Error(`请求失败：${response.status}`);
|
||||
let tagsData = [
|
||||
{
|
||||
tag: "彩虹泡泡",
|
||||
songs: [
|
||||
{ name: "彩虹的微笑", path: "/music/rainbow_smile.mp3" },
|
||||
{ name: "泡泡飞舞", path: "/music/bubble_dance.mp3" },
|
||||
{ name: "七彩梦境", path: "/music/colorful_dream.mp3" },
|
||||
{ name: "泡泡糖世界", path: "/music/bubblegum_world.mp3" },
|
||||
{ name: "彩虹之光", path: "/music/rainbow_light.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "星际漫游",
|
||||
songs: [
|
||||
{ name: "银河漫步", path: "/music/galaxy_walk.mp3" },
|
||||
{ name: "宇宙之旅", path: "/music/space_journey.mp3" },
|
||||
{ name: "星际迷航", path: "/music/star_trek.mp3" },
|
||||
{ name: "太空漫步", path: "/music/space_walk.mp3" },
|
||||
{ name: "银河系边缘", path: "/music/galaxy_edge.mp3" },
|
||||
{ name: "星际穿越", path: "/music/interstellar.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "开心到飞起",
|
||||
songs: [
|
||||
{ name: "快乐飞翔", path: "/music/happy_flying.mp3" },
|
||||
{ name: "笑到飞起", path: "/music/laugh_high.mp3" },
|
||||
{ name: "开心每一天", path: "/music/happy_everyday.mp3" },
|
||||
{ name: "飞向快乐", path: "/music/fly_to_happy.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "甜蜜时光",
|
||||
songs: [
|
||||
{ name: "甜蜜约定", path: "/music/sweet_promise.mp3" },
|
||||
{ name: "时光慢递", path: "/music/slow_time.mp3" },
|
||||
{ name: "甜蜜回忆", path: "/music/sweet_memory.mp3" },
|
||||
{ name: "蜜糖时光", path: "/music/honey_time.mp3" },
|
||||
{ name: "温柔时刻", path: "/music/gentle_moment.mp3" },
|
||||
{ name: "甜蜜陪伴", path: "/music/sweet_company.mp3" },
|
||||
{ name: "幸福时光", path: "/music/happy_time.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "探险",
|
||||
songs: [
|
||||
{ name: "丛林探险", path: "/music/jungle_adventure.mp3" },
|
||||
{ name: "未知旅程", path: "/music/unknown_journey.mp3" },
|
||||
{ name: "探索新世界", path: "/music/explore_new_world.mp3" },
|
||||
{ name: "勇往直前", path: "/music/brave_forward.mp3" },
|
||||
{ name: "神秘岛屿", path: "/music/mystery_island.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "梦幻",
|
||||
songs: [
|
||||
{ name: "梦幻旋律", path: "/music/dream_melody.mp3" },
|
||||
{ name: "幻想曲", path: "/music/fantasy.mp3" },
|
||||
{ name: "梦中的世界", path: "/music/dream_world.mp3" },
|
||||
{ name: "梦幻泡影", path: "/music/dream_bubble.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "幻想曲",
|
||||
songs: [
|
||||
{ name: "幻想交响曲", path: "/music/fantasy_symphony.mp3" },
|
||||
{ name: "幻想即兴曲", path: "/music/fantasy_impromptu.mp3" },
|
||||
{ name: "幻想变奏曲", path: "/music/fantasy_variations.mp3" },
|
||||
{ name: "幻想小夜曲", path: "/music/fantasy_serenade.mp3" },
|
||||
{ name: "幻想曲集", path: "/music/fantasy_collection.mp3" },
|
||||
{ name: "幻想奏鸣曲", path: "/music/fantasy_sonata.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "自由摇摆",
|
||||
songs: [
|
||||
{ name: "自由舞动", path: "/music/free_dance.mp3" },
|
||||
{ name: "摇摆节奏", path: "/music/swing_rhythm.mp3" },
|
||||
{ name: "自由爵士", path: "/music/free_jazz.mp3" },
|
||||
{ name: "摇摆人生", path: "/music/swing_life.mp3" },
|
||||
{ name: "自由即兴", path: "/music/free_improvisation.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "夏日狂欢",
|
||||
songs: [
|
||||
{ name: "夏日派对", path: "/music/summer_party.mp3" },
|
||||
{ name: "阳光沙滩", path: "/music/sunny_beach.mp3" },
|
||||
{ name: "海边狂欢", path: "/music/beach_carnival.mp3" },
|
||||
{ name: "夏日冰饮", path: "/music/summer_drink.mp3" },
|
||||
{ name: "热带风情", path: "/music/tropical_style.mp3" },
|
||||
{ name: "夏夜星空", path: "/music/summer_night_sky.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "微风轻轻吹",
|
||||
songs: [
|
||||
{ name: "微风拂面", path: "/music/breeze_face.mp3" },
|
||||
{ name: "轻风细雨", path: "/music/gentle_rain.mp3" },
|
||||
{ name: "风中絮语", path: "/music/wind_whisper.mp3" },
|
||||
{ name: "微风山谷", path: "/music/breeze_valley.mp3" },
|
||||
{ name: "风的私语", path: "/music/wind_secret.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "江湖",
|
||||
songs: [
|
||||
{ name: "侠客行", path: "/music/knight_journey.mp3" },
|
||||
{ name: "刀剑如梦", path: "/music/sword_dream.mp3" },
|
||||
{ name: "笑傲江湖", path: "/music/laugh_jianghu.mp3" },
|
||||
{ name: "侠义情深", path: "/music/knight_love.mp3" },
|
||||
{ name: "江湖夜雨", path: "/music/jianghu_night_rain.mp3" },
|
||||
{ name: "沧海一声笑", path: "/music/sea_laugh.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "浪漫",
|
||||
songs: [
|
||||
{ name: "浪漫星空", path: "/music/romantic_sky.mp3" },
|
||||
{ name: "浪漫时光", path: "/music/romantic_time.mp3" },
|
||||
{ name: "浪漫邂逅", path: "/music/romantic_encounter.mp3" },
|
||||
{ name: "浪漫旋律", path: "/music/romantic_melody.mp3" },
|
||||
{ name: "浪漫之夜", path: "/music/romantic_night.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "阳光正好",
|
||||
songs: [
|
||||
{ name: "阳光灿烂", path: "/music/sunshine_bright.mp3" },
|
||||
{ name: "正好遇见你", path: "/music/just_meet_you.mp3" },
|
||||
{ name: "阳光路上", path: "/music/sunshine_road.mp3" },
|
||||
{ name: "温暖阳光", path: "/music/warm_sunshine.mp3" },
|
||||
{ name: "阳光照进心里", path: "/music/sunshine_heart.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "青草香",
|
||||
songs: [
|
||||
{ name: "草原晨曲", path: "/music/grassland_morning.mp3" },
|
||||
{ name: "青草地", path: "/music/grass_land.mp3" },
|
||||
{ name: "草香四溢", path: "/music/grass_fragrance.mp3" },
|
||||
{ name: "青草摇曳", path: "/music/grass_swing.mp3" },
|
||||
{ name: "草原牧歌", path: "/music/grassland_song.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "赛博心跳",
|
||||
songs: [
|
||||
{ name: "电子脉冲", path: "/music/electronic_pulse.mp3" },
|
||||
{ name: "数字心跳", path: "/music/digital_heartbeat.mp3" },
|
||||
{ name: "机械律动", path: "/music/mechanical_rhythm.mp3" },
|
||||
{ name: "电流涌动", path: "/music/current_surge.mp3" },
|
||||
{ name: "赛博都市", path: "/music/cyber_city.mp3" },
|
||||
{ name: "数据流", path: "/music/data_flow.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "赛博空间",
|
||||
songs: [
|
||||
{ name: "虚拟现实", path: "/music/virtual_reality.mp3" },
|
||||
{ name: "网络漫游", path: "/music/network_roaming.mp3" },
|
||||
{ name: "数据海洋", path: "/music/data_ocean.mp3" },
|
||||
{ name: "赛博迷宫", path: "/music/cyber_maze.mp3" },
|
||||
{ name: "电子宇宙", path: "/music/electronic_universe.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "节奏大师",
|
||||
songs: [
|
||||
{ name: "节奏之王", path: "/music/rhythm_king.mp3" },
|
||||
{ name: "鼓点狂欢", path: "/music/drum_carnival.mp3" },
|
||||
{ name: "节奏游戏", path: "/music/rhythm_game.mp3" },
|
||||
{ name: "律动人生", path: "/music/rhythm_life.mp3" },
|
||||
{ name: "节奏与灵魂", path: "/music/rhythm_soul.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "快乐节拍",
|
||||
songs: [
|
||||
{ name: "欢乐节拍", path: "/music/happy_beat.mp3" },
|
||||
{ name: "快乐舞曲", path: "/music/happy_dance.mp3" },
|
||||
{ name: "节拍欢歌", path: "/music/beat_song.mp3" },
|
||||
{ name: "快乐音符", path: "/music/happy_note.mp3" },
|
||||
{ name: "跳跃节奏", path: "/music/jumping_rhythm.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "自由鼓点",
|
||||
songs: [
|
||||
{ name: "自由敲击", path: "/music/free_hit.mp3" },
|
||||
{ name: "鼓点狂想", path: "/music/drum_fantasy.mp3" },
|
||||
{ name: "自由节奏", path: "/music/free_rhythm.mp3" },
|
||||
{ name: "鼓点即兴", path: "/music/drum_improvisation.mp3" },
|
||||
{ name: "自由打击", path: "/music/free_percussion.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "悲伤的角落",
|
||||
songs: [
|
||||
{ name: "角落里的泪", path: "/music/corner_tears.mp3" },
|
||||
{ name: "悲伤回忆", path: "/music/sad_memory.mp3" },
|
||||
{ name: "孤独空间", path: "/music/lonely_space.mp3" },
|
||||
{ name: "泪的痕迹", path: "/music/tear_trace.mp3" },
|
||||
{ name: "心碎角落", path: "/music/heartbreak_corner.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "一个人的狂欢",
|
||||
songs: [
|
||||
{ name: "独自狂欢", path: "/music/alone_carnival.mp3" },
|
||||
{ name: "一人派对", path: "/music/one_person_party.mp3" },
|
||||
{ name: "孤独欢乐", path: "/music/lonely_joy.mp3" },
|
||||
{ name: "一个人的舞台", path: "/music/one_person_stage.mp3" },
|
||||
{ name: "独自摇摆", path: "/music/alone_swing.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "经典金曲",
|
||||
songs: [
|
||||
{ name: "永恒经典", path: "/music/eternal_classic.mp3" },
|
||||
{ name: "金曲回放", path: "/music/golden_replay.mp3" },
|
||||
{ name: "不朽名曲", path: "/music/immortal_song.mp3" },
|
||||
{ name: "经典重现", path: "/music/classic_reproduction.mp3" },
|
||||
{ name: "金曲珍藏", path: "/music/golden_collection.mp3" },
|
||||
{ name: "经典传承", path: "/music/classic_inheritance.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "民谣",
|
||||
songs: [
|
||||
{ name: "乡间小路", path: "/music/country_road.mp3" },
|
||||
{ name: "吉他与诗", path: "/music/guitar_poem.mp3" },
|
||||
{ name: "民谣故事", path: "/music/folk_story.mp3" },
|
||||
{ name: "城市民谣", path: "/music/city_folk.mp3" },
|
||||
{ name: "民谣之声", path: "/music/folk_voice.mp3" },
|
||||
{ name: "木吉他旋律", path: "/music/acoustic_melody.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "摇滚",
|
||||
songs: [
|
||||
{ name: "摇滚精神", path: "/music/rock_spirit.mp3" },
|
||||
{ name: "电吉他之声", path: "/music/electric_guitar.mp3" },
|
||||
{ name: "摇滚革命", path: "/music/rock_revolution.mp3" },
|
||||
{ name: "硬摇滚", path: "/music/hard_rock.mp3" },
|
||||
{ name: "摇滚青春", path: "/music/rock_youth.mp3" },
|
||||
{ name: "摇滚传奇", path: "/music/rock_legend.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "古风",
|
||||
songs: [
|
||||
{ name: "千年之约", path: "/music/thousand_year_promise.mp3" },
|
||||
{ name: "墨香古韵", path: "/music/ink_ancient_rhyme.mp3" },
|
||||
{ name: "青丝白发", path: "/music/black_white_hair.mp3" },
|
||||
{ name: "琴瑟和鸣", path: "/music/instruments_harmony.mp3" },
|
||||
{ name: "长安忆", path: "/music/changan_memory.mp3" },
|
||||
{ name: "山水清音", path: "/music/landscape_sound.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "去旅行",
|
||||
songs: [
|
||||
{ name: "旅行的意义", path: "/music/travel_meaning.mp3" },
|
||||
{ name: "背包客", path: "/music/backpacker.mp3" },
|
||||
{ name: "远方的呼唤", path: "/music/distant_call.mp3" },
|
||||
{ name: "旅途中", path: "/music/on_journey.mp3" },
|
||||
{ name: "出发吧", path: "/music/lets_go.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "在路上",
|
||||
songs: [
|
||||
{ name: "公路之歌", path: "/music/highway_song.mp3" },
|
||||
{ name: "一路向前", path: "/music/forward.mp3" },
|
||||
{ name: "旅途风景", path: "/music/journey_scenery.mp3" },
|
||||
{ name: "在路上", path: "/music/on_the_road.mp3" },
|
||||
{ name: "行走的力量", path: "/music/walking_power.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "学习BGM",
|
||||
songs: [
|
||||
{ name: "专注时刻", path: "/music/focus_moment.mp3" },
|
||||
{ name: "学习氛围", path: "/music/study_atmosphere.mp3" },
|
||||
{ name: "思考空间", path: "/music/thinking_space.mp3" },
|
||||
{ name: "安静阅读", path: "/music/quiet_reading.mp3" },
|
||||
{ name: "效率提升", path: "/music/efficiency_improvement.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "运动健身",
|
||||
songs: [
|
||||
{ name: "热血沸腾", path: "/music/hot_blood.mp3" },
|
||||
{ name: "健身节奏", path: "/music/fitness_rhythm.mp3" },
|
||||
{ name: "运动激情", path: "/music/sports_passion.mp3" },
|
||||
{ name: "跑步节拍", path: "/music/running_beat.mp3" },
|
||||
{ name: "力量训练", path: "/music/strength_training.mp3" },
|
||||
{ name: "健身房热曲", path: "/music/gym_hot_song.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "派对聚会",
|
||||
songs: [
|
||||
{ name: "派对之王", path: "/music/party_king.mp3" },
|
||||
{ name: "聚会舞曲", path: "/music/party_dance.mp3" },
|
||||
{ name: "欢乐时光", path: "/music/happy_time.mp3" },
|
||||
{ name: "派对节奏", path: "/music/party_rhythm.mp3" },
|
||||
{ name: "狂欢之夜", path: "/music/carnival_night.mp3" },
|
||||
{ name: "聚会必备", path: "/music/party_essential.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "约会浪漫",
|
||||
songs: [
|
||||
{ name: "浪漫晚餐", path: "/music/romantic_dinner.mp3" },
|
||||
{ name: "约会之夜", path: "/music/date_night.mp3" },
|
||||
{ name: "烛光晚餐", path: "/music/candle_dinner.mp3" },
|
||||
{ name: "浪漫时刻", path: "/music/romantic_moment.mp3" },
|
||||
{ name: "甜蜜约会", path: "/music/sweet_date.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "旅行路上",
|
||||
songs: [
|
||||
{ name: "旅途风景", path: "/music/journey_scenery.mp3" },
|
||||
{ name: "公路之歌", path: "/music/highway_song.mp3" },
|
||||
{ name: "旅行日记", path: "/music/travel_diary.mp3" },
|
||||
{ name: "异国风情", path: "/music/exotic_style.mp3" },
|
||||
{ name: "旅途中的歌", path: "/music/song_on_journey.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "助眠放松",
|
||||
songs: [
|
||||
{ name: "深度睡眠", path: "/music/deep_sleep.mp3" },
|
||||
{ name: "轻松入眠", path: "/music/easy_sleep.mp3" },
|
||||
{ name: "安眠曲", path: "/music/lullaby.mp3" },
|
||||
{ name: "夜晚静谧", path: "/music/night_quiet.mp3" },
|
||||
{ name: "舒缓心灵", path: "/music/soothe_mind.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "专注工作/学习",
|
||||
songs: [
|
||||
{ name: "专注时刻", path: "/music/focus_moment.mp3" },
|
||||
{ name: "高效工作", path: "/music/efficient_work.mp3" },
|
||||
{ name: "思维空间", path: "/music/thinking_space.mp3" },
|
||||
{ name: "学习氛围", path: "/music/study_atmosphere.mp3" },
|
||||
{ name: "专注力提升", path: "/music/focus_improvement.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "通勤路上",
|
||||
songs: [
|
||||
{ name: "早晨通勤", path: "/music/morning_commute.mp3" },
|
||||
{ name: "城市节奏", path: "/music/city_rhythm.mp3" },
|
||||
{ name: "地铁之声", path: "/music/subway_sound.mp3" },
|
||||
{ name: "公交旅程", path: "/music/bus_journey.mp3" },
|
||||
{ name: "上下班音乐", path: "/music/commute_music.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "解压宣泄",
|
||||
songs: [
|
||||
{ name: "压力释放", path: "/music/pressure_release.mp3" },
|
||||
{ name: "情绪宣泄", path: "/music/emotion_vent.mp3" },
|
||||
{ name: "怒吼一声", path: "/music/roar.mp3" },
|
||||
{ name: "释放自我", path: "/music/release_self.mp3" },
|
||||
{ name: "压力消除", path: "/music/pressure_elimination.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "生日祝福",
|
||||
songs: [
|
||||
{ name: "生日快乐", path: "/music/happy_birthday.mp3" },
|
||||
{ name: "温馨祝福", path: "/music/warm_blessing.mp3" },
|
||||
{ name: "生日派对", path: "/music/birthday_party.mp3" },
|
||||
{ name: "祝福之歌", path: "/music/blessing_song.mp3" },
|
||||
{ name: "幸福时刻", path: "/music/happy_moment.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "影视配乐",
|
||||
songs: [
|
||||
{ name: "电影主题", path: "/music/movie_theme.mp3" },
|
||||
{ name: "剧情转折", path: "/music/plot_twist.mp3" },
|
||||
{ name: "情感渲染", path: "/music/emotion_rendering.mp3" },
|
||||
{ name: "史诗场景", path: "/music/epic_scene.mp3" },
|
||||
{ name: "温情时刻", path: "/music/warm_moment.mp3" },
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "绘本音乐",
|
||||
songs: [
|
||||
{ name: "童话世界", path: "/music/fairy_tale_world.mp3" },
|
||||
{ name: "绘本旋律", path: "/music/picture_book_melody.mp3" },
|
||||
{ name: "想象空间", path: "/music/imagination_space.mp3" },
|
||||
{ name: "童年回忆", path: "/music/childhood_memory.mp3" },
|
||||
{ name: "故事音乐", path: "/music/story_music.mp3" },
|
||||
],
|
||||
},
|
||||
]; // 提取 tags 数组
|
||||
|
||||
// 将响应解析为 JSON 格式
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// 成功获取 JSON 数据，后续处理（如使用 tags 数组）
|
||||
console.log("读取到的 JSON 数据：", data);
|
||||
// data.data.length = 1
|
||||
let tagsData = data.data || []; // 提取 tags 数组
|
||||
console.log("tagsData", tagsData);
|
||||
const redCount = Math.min(5, tagsData.length);
|
||||
const redIndexes = [];
|
||||
while (redIndexes.length < redCount) {
|
||||
const randomIdx = Math.floor(Math.random() * tagsData.length);
|
||||
if (!redIndexes.includes(randomIdx)) redIndexes.push(randomIdx);
|
||||
}
|
||||
|
||||
const { containerWidth, containerHeight } = getContainerDimensions();
|
||||
tagsData.forEach((item, index) => {
|
||||
item["type"] = getRandomOutcome();
|
||||
if (redIndexes.includes(index)) item["isred"] = 1;
|
||||
});
|
||||
|
||||
const redCount = Math.min(5, tagsData.length);
|
||||
const redIndexes = [];
|
||||
while (redIndexes.length < redCount) {
|
||||
const randomIdx = Math.floor(Math.random() * tagsData.length);
|
||||
if (!redIndexes.includes(randomIdx)) redIndexes.push(randomIdx);
|
||||
}
|
||||
tags.value = tagsData;
|
||||
|
||||
tagsData.forEach((item, index) => {
|
||||
item["type"] = getRandomOutcome();
|
||||
if (redIndexes.includes(index)) item["isred"] = 1;
|
||||
});
|
||||
|
||||
tags.value = tagsData;
|
||||
|
||||
const fillLength = tags.value.length * 1.5;
|
||||
let tagAll = [];
|
||||
for (let i = 0; i < fillLength; i++) {
|
||||
tagAll.push({
|
||||
type: Math.floor(Math.random() * 5) + 1,
|
||||
});
|
||||
}
|
||||
|
||||
tagsFill.value = tagAll;
|
||||
|
||||
nextTick(() => {
|
||||
tagCloud({
|
||||
selector: "#bubbleContainerFill", // 元素选择器，id 或 class
|
||||
radius: [containerWidth / 2, containerHeight / 2], // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]
|
||||
mspeed: "normal", // 滚动最大速度, 取值: slow, normal(默认), fast
|
||||
ispeed: "slow", // 滚动初速度, 取值: slow, normal(默认), fast
|
||||
direction: 45, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
|
||||
keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
|
||||
multicolour: false, // 彩色字体，颜色随机，取值：true(默认),false
|
||||
});
|
||||
|
||||
tagCloud({
|
||||
selector: "#bubbleContainer", // 元素选择器，id 或 class
|
||||
radius: [containerWidth / 2, containerHeight / 2],
|
||||
mspeed: "normal",
|
||||
ispeed: "normal",
|
||||
direction: 135,
|
||||
keep: false,
|
||||
multicolour: false,
|
||||
});
|
||||
});
|
||||
const fillLength = tags.value.length * 1.5;
|
||||
let tagAll = [];
|
||||
for (let i = 0; i < fillLength; i++) {
|
||||
tagAll.push({
|
||||
type: Math.floor(Math.random() * 5) + 1,
|
||||
});
|
||||
}
|
||||
|
||||
tagsFill.value = tagAll;
|
||||
|
||||
nextTick(() => {
|
||||
const { containerWidth, containerHeight } = getContainerDimensions();
|
||||
|
||||
tagCloud({
|
||||
selector: "#bubbleContainerFill", // 元素选择器，id 或 class
|
||||
radius: [containerWidth / 2, containerHeight / 2], // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]
|
||||
mspeed: "normal", // 滚动最大速度, 取值: slow, normal(默认), fast
|
||||
ispeed: "slow", // 滚动初速度, 取值: slow, normal(默认), fast
|
||||
direction: 45, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
|
||||
keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
|
||||
multicolour: false, // 彩色字体，颜色随机，取值：true(默认),false
|
||||
});
|
||||
|
||||
tagCloud({
|
||||
selector: "#bubbleContainer", // 元素选择器，id 或 class
|
||||
radius: [containerWidth / 2, containerHeight / 2],
|
||||
mspeed: "normal",
|
||||
ispeed: "normal",
|
||||
direction: 135,
|
||||
keep: false,
|
||||
multicolour: false,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 生成单次随机结果的函数
|
||||
@@ -135,7 +524,6 @@ const search = createApp({
|
||||
closeAll();
|
||||
setTimeout(() => {
|
||||
console.log("item", item);
|
||||
|
||||
if (audio?.src != item.path) audio.src = item.path;
|
||||
// audio.src = "https://app.gter.net/image/miniApp/mp3/1.mp3";
|
||||
audio.src = "/static/mp3/1.MP3";
|
||||
|
||||
BIN
static/mp3/guess/A组 世界在转动.MP3
Normal file
BIN
static/mp3/guess/A组 世界在转动.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/A组《来吧，占领我的无私》.MP3
Normal file
BIN
static/mp3/guess/A组《来吧，占领我的无私》.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/B组 《远方》.MP3
Normal file
BIN
static/mp3/guess/B组 《远方》.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/B组 下一站旅行.MP3
Normal file
BIN
static/mp3/guess/B组 下一站旅行.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/B组 大闹天宫.MP3
Normal file
BIN
static/mp3/guess/B组 大闹天宫.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/C组 尊重成长共赢.MP3
Normal file
BIN
static/mp3/guess/C组 尊重成长共赢.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/C组 旧唱片.MP3
Normal file
BIN
static/mp3/guess/C组 旧唱片.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/C组 梅雨季.MP3
Normal file
BIN
static/mp3/guess/C组 梅雨季.MP3
Normal file
Binary file not shown.
BIN
static/mp3/guess/C组《弥留》.MP3
Normal file
BIN
static/mp3/guess/C组《弥留》.MP3
Normal file
Binary file not shown.
Reference in New Issue
Block a user