743 lines
35 KiB
JavaScript
743 lines
35 KiB
JavaScript
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
|
||
createApp({
|
||
setup() {
|
||
// 标签数据
|
||
let tags = ref([]);
|
||
let tagsFill = ref([]);
|
||
|
||
// 获取容器
|
||
const containerFill = ref(null);
|
||
const container = ref(null);
|
||
|
||
// 计算容器尺寸
|
||
const getContainerDimensions = () => {
|
||
const containerWidth = container.value.offsetWidth;
|
||
const containerHeight = container.value.offsetHeight;
|
||
return { containerWidth, containerHeight };
|
||
};
|
||
|
||
let bubbleContainer = null;
|
||
let bubbleContainerFill = null;
|
||
|
||
// 初始创建标签
|
||
const init = () => {
|
||
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 数组
|
||
|
||
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);
|
||
}
|
||
|
||
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;
|
||
|
||
bubbleContainer?.[0]?.destroy();
|
||
bubbleContainerFill?.[0]?.destroy();
|
||
|
||
nextTick(() => {
|
||
const { containerWidth, containerHeight } = getContainerDimensions();
|
||
|
||
bubbleContainerFill = 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
|
||
});
|
||
|
||
bubbleContainer = tagCloud({
|
||
selector: "#bubbleContainer", // 元素选择器，id 或 class
|
||
radius: [containerWidth / 2, containerHeight / 2],
|
||
mspeed: "normal",
|
||
ispeed: "normal",
|
||
direction: 135,
|
||
keep: false,
|
||
multicolour: false,
|
||
});
|
||
});
|
||
};
|
||
|
||
// 生成单次随机结果的函数
|
||
const getRandomOutcome = () => {
|
||
const random = Math.random(); // 生成0-1之间的随机数
|
||
let cumulativeProbability = 0;
|
||
const outcomes = [0.1, 0.2, 0.3, 0.4];
|
||
|
||
for (const outcome of outcomes) {
|
||
cumulativeProbability += outcome;
|
||
if (random < cumulativeProbability) {
|
||
return outcomes.indexOf(outcome) + 1;
|
||
}
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
init();
|
||
|
||
window.addEventListener("resize", () => {
|
||
init();
|
||
});
|
||
|
||
// 添加进度更新事件监听器
|
||
if (audioPlayer.value) {
|
||
volume.value = audioPlayer.value.volume * 100;
|
||
audioPlayer.value.addEventListener("timeupdate", getProgress);
|
||
audioPlayer.value.addEventListener("loadedmetadata", getProgress);
|
||
}
|
||
});
|
||
|
||
// 组件卸载时清理事件监听器
|
||
onUnmounted(() => {
|
||
audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
|
||
audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
|
||
});
|
||
|
||
const handleMouseleave = (e) => {
|
||
e.target.style.animationPlayState = "running";
|
||
};
|
||
|
||
const handleMouseenter = (e) => {
|
||
e.target.style.animationPlayState = "paused";
|
||
};
|
||
|
||
const audioPlayer = ref(null);
|
||
|
||
const clickSongs = (songs) => {
|
||
const randomIndex = Math.floor(Math.random() * songs.length);
|
||
const item = songs[randomIndex];
|
||
manageAudio(item);
|
||
};
|
||
|
||
// 管理音频播放
|
||
const manageAudio = (item) => {
|
||
const audio = audioPlayer.value;
|
||
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";
|
||
audio.play().then(() => (playData.value = { ...item, state: true }));
|
||
}, 500);
|
||
};
|
||
|
||
// 重新播放
|
||
const rePlay = () => {
|
||
if (!playData.value) return;
|
||
const item = playData.value;
|
||
manageAudio(item);
|
||
};
|
||
|
||
// 播放 组件数据
|
||
let playData = ref(null);
|
||
|
||
// 响应式数据：音量值、是否静音
|
||
let volume = ref(100);
|
||
|
||
// 计算并设置音量百分比
|
||
const setVolumePercentage = (percentage) => {
|
||
const volumePercent = Math.max(0, Math.min(100, percentage));
|
||
volume.value = Math.abs(~~volumePercent);
|
||
|
||
// 设置音频元素的音量（范围是0-1）
|
||
if (audioPlayer.value) audioPlayer.value.volume = volume.value / 100;
|
||
};
|
||
|
||
// 处理音量进度条点击
|
||
const handleVolumeClick = (event) => {
|
||
// 获取进度条元素
|
||
const progressBar = event.currentTarget;
|
||
const rect = progressBar.getBoundingClientRect();
|
||
|
||
const clickPosition = rect.bottom - event.clientY;
|
||
const percentage = (clickPosition / rect.height) * 100;
|
||
|
||
setVolumePercentage(percentage);
|
||
};
|
||
|
||
let volumeShow = ref(false);
|
||
// 处理音量进度条拖拽
|
||
let isDragging = false;
|
||
|
||
const startDrag = (event) => {
|
||
isDragging = true;
|
||
handleVolumeDrag(event);
|
||
// 添加事件监听器
|
||
document.addEventListener("mousemove", handleVolumeDrag);
|
||
document.addEventListener("mouseup", stopDrag);
|
||
};
|
||
|
||
const handleVolumeDrag = (event) => {
|
||
if (!isDragging) return;
|
||
|
||
// 获取音量进度条元素
|
||
const progressBar = document.querySelector(".sound-control .progress");
|
||
if (!progressBar) return;
|
||
|
||
const rect = progressBar.getBoundingClientRect();
|
||
|
||
// 计算拖拽位置相对于进度条的比例
|
||
let dragPosition = rect.bottom - event.clientY;
|
||
// 限制在进度条范围内
|
||
dragPosition = Math.max(0, Math.min(dragPosition, rect.height));
|
||
|
||
const percentage = (dragPosition / rect.height) * 100;
|
||
setVolumePercentage(percentage);
|
||
};
|
||
|
||
const stopDrag = () => {
|
||
isDragging = false;
|
||
document.removeEventListener("mousemove", handleVolumeDrag);
|
||
document.removeEventListener("mouseup", stopDrag);
|
||
};
|
||
|
||
const handleVolumeShow = () => (volumeShow.value = true);
|
||
|
||
const handleVolumeHide = () => (volumeShow.value = false);
|
||
|
||
onUnmounted(() => {
|
||
// 确保移除所有拖拽相关事件
|
||
document.removeEventListener("mousemove", handleVolumeDrag);
|
||
document.removeEventListener("mouseup", stopDrag);
|
||
document.removeEventListener("mousemove", handleBarDragBottomDrag);
|
||
document.removeEventListener("mouseup", stopBarDragBottom);
|
||
});
|
||
|
||
const progress = ref(0); // 播放进度百分比
|
||
// 响应式变量存储当前播放时间和总时长
|
||
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")}`;
|
||
};
|
||
|
||
// 更新进度的函数
|
||
const getProgress = () => {
|
||
if (!audioPlayer.value) return;
|
||
const currentTime = audioPlayer.value.currentTime || 0;
|
||
const duration = audioPlayer.value.duration || 0;
|
||
const p = duration > 0 ? (currentTime / duration) * 100 : 0;
|
||
|
||
progress.value = p;
|
||
// 更新时间显示
|
||
currentTimeFormatted.value = formatTime(currentTime);
|
||
durationFormatted.value = formatTime(duration);
|
||
};
|
||
|
||
// 快进 和 后退 10秒
|
||
const fastForward = (type = "fast") => {
|
||
if (!audioPlayer.value) return;
|
||
console.log("playData.value", playData.value);
|
||
|
||
const src = playData.value?.path || "";
|
||
|
||
if (audioPlayer.value.src != src) {
|
||
manageAudio(playData.value);
|
||
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 closeAll = () => {
|
||
audioPlayer.value.pause();
|
||
|
||
playData.value && (playData.value.state = false);
|
||
};
|
||
|
||
// 处理音量进度条拖拽
|
||
let isBarBottomDragging = false;
|
||
|
||
const startBarDragBottom = (event) => {
|
||
isBarBottomDragging = true;
|
||
handleBarDragBottomDrag(event);
|
||
// 添加事件监听器
|
||
document.addEventListener("mousemove", handleBarDragBottomDrag);
|
||
document.addEventListener("mouseup", stopBarDragBottom);
|
||
};
|
||
|
||
const stopBarDragBottom = () => {
|
||
isBarBottomDragging = false;
|
||
document.removeEventListener("mousemove", handleBarDragBottomDrag);
|
||
document.removeEventListener("mouseup", stopBarDragBottom);
|
||
};
|
||
|
||
// 直接点击进度条 跳转
|
||
const handleBarDragBottomClick = (event) => {
|
||
// 获取进度条元素
|
||
const progressBar = event.currentTarget;
|
||
const rect = progressBar.getBoundingClientRect();
|
||
const clickPosition = event.clientX - rect.left;
|
||
const percentage = clickPosition / rect.width;
|
||
|
||
// 限制百分比在0-100之间
|
||
const clampedPercentage = Math.max(0, Math.min(100, percentage));
|
||
updatePlay(clampedPercentage);
|
||
};
|
||
|
||
const handleBarDragBottomDrag = (event) => {
|
||
// console.log("event", event);
|
||
|
||
if (!isBarBottomDragging) return;
|
||
|
||
// 获取音量进度条元素
|
||
const progressBar = document.querySelector(".bottom-play .bottom-middle .progress-bar");
|
||
if (!progressBar) return;
|
||
|
||
const rect = progressBar.getBoundingClientRect();
|
||
|
||
// 计算拖拽位置相对于进度条的比例
|
||
let dragPosition = event.clientX - rect.left;
|
||
// 限制在进度条范围内
|
||
dragPosition = Math.max(0, Math.min(dragPosition, rect.width));
|
||
|
||
const percentage = dragPosition / rect.width;
|
||
|
||
updatePlay(percentage);
|
||
};
|
||
|
||
const updatePlay = (percentage) => {
|
||
if (!audioPlayer.value) return;
|
||
const duration = audioPlayer.value.duration || 0;
|
||
let newTime = duration * percentage;
|
||
newTime = Math.max(0, Math.min(duration, newTime));
|
||
audioPlayer.value.currentTime = newTime;
|
||
|
||
getProgress();
|
||
};
|
||
|
||
return { startBarDragBottom, handleBarDragBottomClick, closeAll, fastForward, progress, durationFormatted, currentTimeFormatted, rePlay, handleVolumeHide, handleVolumeShow, stopDrag, handleVolumeDrag, startDrag, volumeShow, handleVolumeClick, setVolumePercentage, volume, audioPlayer, playData, handleMouseleave, handleMouseenter, clickSongs, tags, tagsFill, containerFill, container };
|
||
},
|
||
}).mount("#song-request-station");
|