blog/src/components/aplayer.vue

<template>
  <!-- 准备一个容器用来存放音乐播放器 -->
  <div id="aplayer"></div>
</template>

<script setup lang="ts">
// https://aplayer.js.org/#/zh-Hans/
// import Hls from 'hls.js/dist/hls.min.js';
import APlayer from "aplayer"; // 引入音乐插件
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import { onMounted, reactive } from "vue";

// window.Hls = Hls;
const data: any = reactive({
  audio: [],
  info: {
    fixed: true, // 开启吸底模式
    // mini: false, // 开启迷你模式
    // autoplay: true, // 自动播放(已经没用了)
    // theme: '#000', // 主题色
    loop: "all", // 	音频循环播放, 可选值: 'all', 'one', 'none'
    order: "list", // 音频循环顺序, 可选值: 'list', 'random'
    preload: "metadata", //预加载，可选值: 'none', 'metadata', 'auto'
    volume: 0.5, // 默认音量，可选值: 0-1
    mutex: true, // 互斥，默认为true，即不允许多个音频同时播放，当前播放的音频会暂停其他音频
    lrcType: 3, // 歌词类型，可选值:  1, 2, 3
  },
});


onMounted(async () => {
  // 8834041785
  // const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=7567066822")
  // const res = await fetch("https://api.moeyao.cn/meting/?server=tencent&type=playlist&id=8834041785")
  // const mlist = await res.json()
  const metto = 'youzi'
  const server = 'tencent'
  const gdid = '7567066822'
  let ck = 'RK=beuVmBI+x3; ptcz=08924c0c66c35b66361f002fb0b3005ff0f2144404f548f8728b167ffb3dc25d; pgv_pvid=2605897556; fqm_pvqid=c38eee7f-1f49-4867-8fb4-8dbb764cb93b; ts_uid=4584087650; pac_uid=0_xXEQBtbyPnKSj; omgid=0_SK8mZi6ZyjtN4; _qimei_q32=d611a6803057686110470945b0c17a21; _qimei_q36=fcef018f916225c22be032db30001e219617; _qimei_h38=e8d664cf2171af215382857302000000719801; eas_sid=I1j7m5e9o2O188P6Y4P7D745Z4; fqm_sessionid=f2c44c43-4d85-4dcb-99c0-cef6d6e2b0cb; pgv_info=ssid=s1311374400; ts_last=y.qq.com/; ts_refer=cn.bing.com/; _qpsvr_localtk=0.1390152059728047; login_type=1; psrf_access_token_expiresAt=1765271149; psrf_qqopenid=DE4C1520CB81DEEF7C0BE8E9B0FD2783; wxrefresh_token=; music_ignore_pskey=202306271436Hn@vBj; wxunionid=; euin=owv5oeCioiEAoz**; wxopenid=; tmeLoginType=2; psrf_qqrefresh_token=A9707E145813679F3654C6E051AA3E2F; psrf_qqaccess_token=C0591D34DF4A719D28815DBA71122DC5; psrf_musickey_createtime=1760087149; psrf_qqunionid=AD81CE40E407AFA9A2F984D05F7F5CD6; uin=2410633923; qm_keyst=Q_H_L_63k3NMFc5RtmTBDyGhskoc5AjaymIKYUZThRS2bJfh0AHztt8D10MRy1XN-MEAUtIkdF_oauym2Y51IbgjNvw1Wu8hZECDA; qqmusic_key=Q_H_L_63k3NMFc5RtmTBDyGhskoc5AjaymIKYUZThRS2bJfh0AHztt8D10MRy1XN-MEAUtIkdF_oauym2Y51IbgjNvw1Wu8hZECDA'
  const res = await fetch(`https://met.hxyouzi.com/api?server=${server}&type=playlist&id=${gdid}`)
  let mlist: any = await res.json()
  data.audio = []
  mlist.forEach((i: any) => {
    data.audio.push({
      title: i.title,
      author: i.author,
      url: i.url,
      pic: i.pic,
      lrc: i.lrc,
    });
    // console.log('>>>>>',data.audio);

  });

  // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
  const ap = new APlayer({
    container: document.getElementById("aplayer"),
    audio: data.audio, // 音乐信息
    ...data.info, // 其他配置信息
  });
  const d: any = document.querySelector("#aplayer > div.aplayer-body > div.aplayer-miniswitcher > button");
  let flag = true;
  const app: any = document.querySelector("#aplayer > div.aplayer-lrc");
  app.style.display = "block";
  app.style.transform = "translateY(50px)";
  d.addEventListener("click", () => {
    if (flag) {
      app.style.transform = "translateY(0)";
      ap.lrc.show();
      flag = false;
    } else {
      app.style.transform = "translateY(50px)";
      ap.lrc.hide();
      ap.list.hide();
      flag = true;
    }
  });
  document.querySelector(".aplayer-list > ol")?.addEventListener("mousewheel", (e) => {
    e.stopPropagation();
  })

  // 获取当前屏幕宽度
  const width = document.documentElement.clientWidth; // 获取屏幕宽度
  if (width < 767) d.click();
});
</script>
<style lang="less" scoped>
#aplayer {
  width: 480px; // 定个宽度
  color: var(--n-text-color); // 设置颜色
  background-color: #f5f5f8; // 设置背景色

  :deep(.aplayer-body) {
    color: var(--n-text-color); // 设置颜色
    background-color: #f5f5f8; // 设置背景色

    // bottom: 10px; // 设置底部距离
    .aplayer-icon-lrc {
      display: none;
    }
  }

  :deep(.aplayer-icon):hover svg path {
    fill: @blue; // 设置颜色
  }

  :deep(.aplayer-list) {
    width: 418px !important;
    background-color: #f5f5f8;
    border: none;
  }

  :deep(.aplayer-list-light) {
    background: inherit;
    color: @orange;
  }

  :deep(.aplayer-list) ol {
    max-height: 160px !important;

    // margin-bottom: 12px;
    .aplayer-list-light .aplayer-list-author {
      color: @orange !important;
    }
  }

  :deep(.aplayer-list) ol li {
    border: none;
  }

  :deep(.aplayer-list) ol li:hover {
    background: inherit;
    color: @blue;
    border: none;

    .aplayer-list-author {
      color: @blue !important;
    }
  }

  :deep(.aplayer-info) {
    padding: 0 !important;
    border-top: none;
  }

  :deep(.aplayer-icon) svg {
    color: var(--n-text-color); // 设置颜色
    background-color: var(--v-bgc); // 设置背景色
  }

  :deep(.aplayer-icon):hover svg {
    color: @blue; // 设置颜色
  }

  :deep(.aplayer-miniswitcher) {
    color: var(--n-text-color); // 设置颜色
    background-color: var(--v-bgc); // 设置背景色
  }

  :deep(.aplayer-lrc) {
    // text-align: right !important;
    width: 368px !important;
    transition: all 0.3s ease;
    // left: unset;
    bottom: 12px;
    z-index: 999;
    text-shadow: none !important;
  }

  :deep(.aplayer-lrc-contents) {
    transition: all 0.5s ease !important;

    p {
      font-size: 12px !important;
      color: @primary !important;
      opacity: 0.8;
    }
  }

  :deep(.aplayer-lrc-contents) {
    .aplayer-lrc-current {
      opacity: 1;
      font-size: 13px !important;
      color: @orange !important;
    }
  }
}

@media screen and (max-width: 800px) {
  #aplayer {
    width: 100vw !important;
  }
}
</style>