GamePortrait/src/components/aPlayer.vue

<template>
  <div id="aPlayer"></div>
</template>
<script>
/* eslint-disable */
import APlayer from "aplayer"
import { nextTick, onMounted, computed, watch } from "vue"
import { getAppMusic } from "@/utils/api"
import { useStore } from "vuex"
export default {
  name: "confirmBet",
  components: {},
  props: {
    data: {
      type: Object,
      default: () => ({
        show: false
      })
    }
  },
  setup() {
    const store = useStore()
    const musicVolume = computed(() => store.state.config.musicVolume)
    const volume = computed(() => store.state.config.volume)
    let player = null
    onMounted(() => {
      nextTick(() => {
        // const list = [
        //   {
        //     name: "We Can’t Stop", //歌名
        //     artist: "Miley Cyrus - Berlin Tag Und Nacht Vol.4", //歌手
        //     url: require("../assets/mp3/2023520.mp3"), //音频文件地址
        //     cover: require("../assets/mp3/cover/2023520.webp"), //音乐封面地址
        //     lrc: ""
        //   },
        //   {
        //     name: "Peter Pan Was Right", //歌名
        //     artist: "Anson Seabra - Peter Pan Was Right", //歌手
        //     url: require("../assets/mp3/4138042894.mp3"), //音频文件地址
        //     cover: require("../assets/mp3/cover/4138042894.webp"), //音乐封面地址
        //     lrc: ""
        //   },
        //   {
        //     name: "Shape of You", //歌名
        //     artist: "Ed Sheeran - Shape of You", //歌手
        //     url: require("../assets/mp3/3197545262.mp3"), //音频文件地址
        //     cover: require("../assets/mp3/cover/3197545262.webp"), //音乐封面地址
        //     lrc: ""
        //   },
        //   {
        //     name: "Unstoppable", //歌名
        //     artist: "Sia - This Is Acting (Deluxe Version)", //歌手
        //     url: require("../assets/mp3/6005971CUY6.mp3"), //音频文件地址
        //     cover: require("../assets/mp3/cover/6005971CUY6.webp"), //音乐封面地址
        //     lrc: ""
        //   },
        //   {
        //     name: "Bones", //歌名
        //     artist: "Imagine Dragons - Bones", //歌手
        //     url: require("../assets/mp3/680637476.mp3"), //音频文件地址
        //     cover: require("../assets/mp3/cover/680637476.webp"), //音乐封面地址
        //     lrc: ""
        //   },
        //   {
        //     name: "Someone Like You", //歌名
        //     artist: "Adele - 21 (Explicit)", //歌手
        //     url: require("../assets/mp3/2591806824.mp3"), //音频文件地址
        //     cover: require("../assets/mp3/cover/2591806824.webp"), //音乐封面地址
        //     lrc: ""
        //   }
        // ]

        // 音乐文件
        getAppMusic("/music.json")
          .then((res) => {
            if (res.list && res.list.length > 0) {
              init(res.list)
            } else {
              console.warn("音乐列表文件不存在")
            }
          })
          .catch((err) => {
            console.log(err)
          })
      })
    })
    const init = (list) => {
      player = new APlayer({
        container: document.getElementById("aPlayer"),
        mini: false,
        audio: list,
        listFolded: false,
        listMaxHeight: "8rem"
      })
      store.commit("app/musicPlayer", player)
      player.on("play", function () {
        if (musicVolume.value == false) {
          store.commit("config/setValue", {
            name: "musicVolume",
            type: true
          })
        }
      })
      player.on("pause", function () {
        if (musicVolume.value == true) {
          // console.log("pause")
          store.commit("config/setValue", {
            name: "musicVolume",
            type: false
          })
        }
      })
      player.pause()
      player.play()
    }
    watch(
      () => [musicVolume.value],
      ([type]) => {
        if (player) {
          nextTick(() => {
            if (type) {
              player.volume(volume.value.music / 100, true)
              player.play()
            } else {
              player.volume(volume.value.music / 100, false)
              player.pause()
            }
          })
        }
      },
      { deep: true }
    )
    watch(
      () => [volume.value.music],
      ([value]) => {
        if (player) {
          nextTick(() => {
            player.volume(value / 100, true)
          })
        }
      },
      { immediate: true, deep: true }
    )
  }
}
</script>
<style lang="scss">
@import "APlayer/dist/APlayer.min";
.aplayer {
  transform: rotateX(0deg);
}
.aplayer .aplayer-icon {
  width: 22px;
  height: 22px;
  margin: 0 4px;
}
.aplayer-controller {
  align-items: center;
}
.aplayer.aplayer-arrow .aplayer-icon-loop,
.aplayer.aplayer-arrow .aplayer-icon-order {
  display: inline-block;
}
.aplayer .aplayer-icon-volume-down {
  display: none;
}
.aplayer .aplayer-info .aplayer-music {
  line-height: 20px;
  display: flex;
  margin-bottom: 10px;
  width: calc(100% - 40px);
  span:last-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .aplayer-title {
    padding-right: 10px;
  }
}
</style>