refactor: Adjusting music initialization logic

1.  Initial music loads twice on app start, a second load is triggered as soon as the page is clicked. So I close autounlock
2. Unplayable music can’t be play

src/components/Player.vue

@@ -144,7 +144,7 @@ export default {
   mounted() {
     setInterval(() => {
       // fix 歌曲播放完还设置进度的问题，及 _id 不存在的问题
-      if (this.howler && this.howler._sounds[0]._id) {
+      if (this.howler && this.howler._sounds?.[0]?._id) {
         this.progress = ~~this.howler.seek();
       }
     }, 1000);
@@ -169,13 +169,17 @@ export default {
       },
     },
     playing() {
-      if (this.howler.state() === "loading") {
-        this.updatePlayerState({ key: "playing", value: true });
-        return true;
+      if (this.howler) {
+        if (this.howler.state() === "loading") {
+          this.updatePlayerState({ key: "playing", value: true });
+          return true;
+        }
+        const status = this.howler.playing();
+        this.updatePlayerState({ key: "playing", value: status });
+        return status;
+      } else {
+        return false;
       }
-      const status = this.howler.playing();
-      this.updatePlayerState({ key: "playing", value: status });
-      return status;
     },
     progressMax() {
       let max = ~~(this.currentTrack.dt / 1000);

src/store/actions.js

@@ -12,13 +12,13 @@ const ipcRenderer =
   process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
 
 export default {
-  switchTrack({ state, dispatch, commit }, basicTrack) {
-    getTrackDetail(basicTrack.id).then((data) => {
+  switchTrack({ state, dispatch, commit }, { id, sort = 0, autoplay = true }) {
+    getTrackDetail(id).then((data) => {
       let track = data.songs[0];
-      track.sort = basicTrack.sort;
+      track.sort = sort;
 
       // 获取当前的播放时间。初始化为 loading 状态时返回 howler 的实例而不是浮点数时间，比如 1.332
-      let time = state.howler.seek();
+      let time = state.howler ? state.howler.seek() : 0;
       let currentTime = 0;
       if (time === 0) {
         // state.howler._duration 可以获得当前实例的播放时长
@@ -54,7 +54,7 @@ export default {
       }
 
       function commitMP3(mp3) {
-        commit("replaceMP3", mp3);
+        commit("replaceMP3", { mp3, autoplay });
         state.howler.once("end", () => {
           dispatch("nextTrack");
         });

src/store/index.js

@@ -4,7 +4,7 @@ import state from "./state";
 import mutations from "./mutations";
 import actions from "./actions";
 import initLocalStorage from "./initLocalStorage";
-import { Howl, Howler } from "howler";
+import { Howler } from "howler";
 import { changeAppearance } from "@/utils/common";
 import updateApp from "@/utils/updateApp";
 import pkg from "../../package.json";
@@ -39,15 +39,17 @@ const options = {
 
 const store = new Vuex.Store(options);
 
-store.state.howler = new Howl({
-  src: [
-    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`,
-  ],
-  html5: true,
-  format: ["webm", "mp3"],
-});
-
 Howler.volume(store.state.player.volume);
+// 防止软件第一次打开资源加载2次
+Howler.autoUnlock = false;
+
+const currentTrackId = store.state?.player?.currentTrack?.id;
+if (currentTrackId) {
+  store.dispatch("switchTrack", {
+    id: currentTrackId,
+    autoplay: false,
+  });
+}
 
 if ([undefined, null].includes(store.state.settings.lang)) {
   let lang = "en";

src/store/initLocalStorage.js

@@ -8,23 +8,7 @@ export default {
     shuffle: false,
     volume: 1,
     repeat: "off", // on | off | one
-    currentTrack: {
-      sort: 0,
-      name: "Happiness",
-      id: 1478005597,
-      artists: [{ id: 12931567, name: "John K", tns: [], alias: [] }],
-      album: {
-        id: 95187944,
-        name: "Happiness",
-        picUrl:
-          "https://p1.music.126.net/kHNNN-VxufjlBtyNPIP3kg==/109951165306614548.jpg",
-        tns: [],
-        pic_str: "109951165306614548",
-        pic: 109951165306614540,
-      },
-      time: 196022,
-      playable: true,
-    },
+    currentTrack: {},
     notShuffledList: [],
     list: [],
     listInfo: {

src/store/mutations.js

@@ -8,15 +8,16 @@ export default {
   updateCurrentTrack(state, track) {
     state.player.currentTrack = track;
   },
-  replaceMP3(state, mp3) {
-    Howler.unload();
+  replaceMP3(state, { mp3, autoplay }) {
+    if (state.howler) {
+      Howler.unload();
+    }
     state.howler = new Howl({
       src: [mp3],
-      autoplay: true,
+      autoplay,
       html5: true,
       format: ["mp3", "flac"],
     });
-    state.howler.play();
   },
   updatePlayerList(state, list) {
     state.player.list = list;