fix media session

src/locale/lang/en.js

@@ -117,7 +117,7 @@ export default {
       high: "High",
       lossless: "Lossless",
     },
-    deviceSelector: "Output Device",
+    deviceSelector: "Audio Output Device",
     appearance: {
       text: "Appearance",
       auto: "Auto",

src/utils/Player.js

@@ -152,33 +152,19 @@ export default class {
       time,
     });
   }
-  _setupAudioNode() {
-    Howler.masterGain.disconnect();
-    const mediaStreamNode = Howler.ctx.createMediaStreamDestination();
-    Howler.masterGain.connect(mediaStreamNode);
-    let audio = '';
-    if (document.querySelector('audio') !== null) {
-      audio = document.querySelector('audio');
-    } else {
-      audio = document.createElement('audio');
-      document.body.append(audio);
-    }
-    audio.autoplay = true;
-    audio.srcObject = mediaStreamNode.stream;
-    audio.setSinkId(store.state.settings.outputDevice);
-  }
   _playAudioSource(source, autoplay = true) {
     Howler.unload();
-    this._setupAudioNode();
     this._howler = new Howl({
       src: [source],
-      html5: false,
+      html5: true,
       format: ["mp3", "flac"],
     });
     if (autoplay) {
       this.play();
       document.title = `${this._currentTrack.name} · ${this._currentTrack.ar[0].name} - YesPlayMusic`;
     }
+    this.setOutputDevice();
+    // this._updatePositionState();
     this._howler.once("end", () => {
       this._nextTrackCallback();
     });
@@ -272,6 +258,9 @@ export default class {
       navigator.mediaSession.setActionHandler("stop", () => {
         this.pause();
       });
+      navigator.mediaSession.setActionHandler("seekto", (event) => {
+        this.seek(event.seekTime);
+      });
     }
   }
   _updateMediaSessionMetaData(track) {
@@ -292,6 +281,15 @@ export default class {
       ],
     });
   }
+  // _updatePositionState() {
+  //   if ('setPositionState' in navigator.mediaSession) {
+  //     navigator.mediaSession.setPositionState({
+  //       duration: this._currentTrack.dt / 1000,
+  //       playbackRate: 1,
+  //       position: this.seek(),
+  //     })
+  //   }
+  // }
   _nextTrackCallback() {
     this._scrobble(true);
     if (this.repeatMode === "one") {
@@ -358,6 +356,10 @@ export default class {
       this.volume = 0;
     }
   }
+  setOutputDevice() {
+    if (this._howler._sounds.length <= 0) return;
+    this._howler._sounds[0]._node.setSinkId(store.state.settings.outputDevice);
+  }
 
   replacePlaylist(
     trackIDs,

src/views/settings.vue

@@ -243,7 +243,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["settings", "data"]),
+    ...mapState(["player", "settings", "data"]),
     isElectron() {
       return process.env.IS_ELECTRON;
     },
@@ -293,7 +293,7 @@ export default {
       set(deviceId) {
         if (deviceId === this.settings.outputDevice || deviceId === undefined) return;
         this.$store.commit("changeOutputDevice", deviceId);
-        document.querySelector("audio").setSinkId(deviceId); // Change output device
+        this.player.setOutputDevice();
       },
     },
     showGithubIcon: {