qjkankan_v1.1.1/packages/qjkankan-view/src/store/modules/audio.js

import { useAudio } from "@/hooks/useAudio";
import { unref } from "vue";

const resourceURL = process.env.VUE_APP_RESOURCE_URL;

export default {
  namespaced: true,
  state() {
    return {
      normalBGM: {
        url: "",
        isAuto: false,
        type: 0,
        order: 0,
        repeat: true,
      }, // 一般背景音乐
      // appBGM: {
      //     url: "",
      //     isAuto: false,
      //     order: 0
      // }, // 一般背景音乐
      v3BGM: {
        url: "",
        isAuto: false,
        type: 1,
        order: 9,
        repeat: false,
        isExist: false,
        isPlayIng: false,
      }, // v3背景音乐
      v4BGM: {
        url: "",
        type: 2,
        isAuto: false,
        order: 10,
        repeat: false,
      }, // v4背景音乐
      explanationBGM: {
        url: "",
        type: 3,
        isAuto: false,
        order: 11,
        repeat: false,
      }, //解说音乐
      currentPlaying: false,
      pauseByControl: false,
    };
  },
  getters: {
    bgmList: (state) => [
      state.normalBGM,
      state.v3BGM,
      state.v4BGM,
      state.explanationBGM,
    ],
    currentAudio: (_, getters) => {
      const arr = Array.from(getters.bgmList)
        .filter((i) => i.url && i.type !== 1)
        .sort((a, b) => b.order - a.order);
      return arr.length > 0 ? arr[0] : false;
    },
    currentPlayer: () => {
      const { currentPlayer } = useAudio();
      return unref(currentPlayer);
    },

    isCurrentPlaying: (state) => state.currentPlaying,
    isHasNormalBGM: (state) => {
      return state.normalBGM.url && state.normalBGM.url.length > 0;
    },
    isHasV3BGM: (state) => {
      return state.v3BGM.isExist;
    },
    isHasV4BGM: (state) => {
      return state.v4BGM.url.length > 0;
    },
    isHasExplanationBGM: (state) => {
      return state.explanationBGM.url.length > 0;
    },
    isPlayNormalBGM: (_, getters) => {
      return getters.currentAudio.type === 0;
    },
    isPlayV3BGM: (state) => {
      return state.v3BGM.isPlayIng;
    },
    isPlayV4BGM: (_, getters) => {
      return getters.currentAudio.type === 2;
    },
    isPlayExplanationBGM: (_, getters) => {
      return getters.currentAudio.type === 3;
    },
    isPauseByControl: (state) => {
      return state.pauseByControl;
    },
  },
  mutations: {
    setNormalBGM(state, payload) {
      state.normalBGM.url = payload.url;
      state.normalBGM.isAuto = payload.isAuto;
    },
    setExplanationBGM(state, payload) {
      state.explanationBGM.url = payload.url;
      state.explanationBGM.isAuto = payload.isAuto;
      state.explanationBGM.repeat = payload.repeat;
    },
    setV3BGM(state, payload) {
      state.v3BGM.isExist = payload;
    },
    setV3BGMPlaying(state, payload) {
      state.v3BGM.isPlayIng = payload;
    },
    setV4BGM(state, payload) {
      state.v4BGM.url = payload.url;
      state.v4BGM.isAuto = payload.isAuto;
      state.v4BGM.repeat = payload.repeat;
    },
    setPlayStatus(state, payload) {
      state.currentPlaying = payload;
    },
  },
  actions: {
    initNormalBGM({ commit }, url) {
      // 一般背景音乐
      commit("setNormalBGM", {
        isAuto: true,
        url: url,
      });
    },
    initExplanationBGM({ commit }, { url, repeat, isAuto }) {
      commit("setExplanationBGM", { url, repeat, isAuto });
    },

    initV3BGM({ commit, dispatch }, status) {
      // V3音乐
      commit("setV3BGM", status);
      if (status) {
        dispatch("pauseBGM");
      }
    },
    initV4BGM({ commit }, url) {
      // v4音乐
      let newURL = "";
      if (url) {
        if (!/^https?:\/\//.test(url)) {
          newURL = resourceURL + url;
        } else {
          newURL = url;
        }
      }
      commit("setV4BGM", { url: newURL, repeat: true, isAuto: true });
    },
    playBGM({ commit, getters, state, dispatch }, type) {
      console.warn("~~playBGM~~", type);
      // debugger;
      const index = getters["currentAudio"].order;
      const order = index + 1;
      const target = getters["bgmList"].find((i) => i.type === type);
      state.pauseByControl = false;
      if (target.url.length > 0) {
        switch (type) {
          case 0:
            state.normalBGM.order = order;
            break;
          case 2:
            state.v4BGM.order = order;
            break;
          case 3:
            state.explanationBGM.order = order;
            break;
          default:
            state.normalBGM.order = order;
            break;
        }
      } else {
        console.error("当前BGM没有URL", target);
        if (type === 2) {
          //fallback
          dispatch("playBGM", 0);
        }
      }
    },
    pauseBGM({ commit, getters, state, dispatch }, from) {
      const { currentPlayer } = useAudio();
      if (unref(currentPlayer)) {
        currentPlayer.value.pause();
      }
      if (from === 0) {
        state.pauseByControl = true;
      }
    },
    resumeBGM() {
      const { currentPlayer } = useAudio();
      if (unref(currentPlayer)) {
        const hasURl =
          currentPlayer.value._src && currentPlayer.value._src.length > 0;
          console.log("resumeBGM", hasURl);
        hasURl && currentPlayer.value.resume();
      }
    },
    updatePlayerStatus({ commit }, status) {
      commit("setPlayStatus", status);
    },

    updateV3BGMStatus({ commit }, status) {
      commit("setV3BGMPlaying", status);
    },

    destroy() {
      const { currentPlayer } = useAudio();
      if (unref(currentPlayer)) {
        currentPlayer.value.destroy();
      }
    },
    setLock({ commit }, status) {
      const { currentPlayer } = useAudio();
      if (unref(currentPlayer)) {
        status ? currentPlayer.value.lock() : currentPlayer.value.unlock();
      }
    },
    setMuteBGM({ commit }, status) {
      const { currentPlayer } = useAudio();
      if (unref(currentPlayer)) {
        status ? currentPlayer.value.mute() : currentPlayer.value.unmute();
      }
    },
  },
};