Merge branch 'dev'

src/locale/lang/en.js

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

src/locale/lang/zh-CN.js

@@ -119,6 +119,7 @@ export default {
       high: "极高",
       lossless: "无损",
     },
+    deviceSelector: "音频输出设备",
     appearance: {
       text: "外观",
       auto: "自动",

src/store/initLocalStorage.js

@@ -7,6 +7,7 @@ let localStorage = {
     lang: null,
     appearance: "auto",
     musicQuality: 320000,
+    outputDevice: "default",
     showGithubIcon: true,
     showPlaylistsByAppleMusic: true,
     showUnavailableSongInGreyStyle: true,

src/store/mutations.js

@@ -9,6 +9,9 @@ export default {
   changeMusicQuality(state, value) {
     state.settings.musicQuality = value;
   },
+  changeOutputDevice(state, deviceId) {
+    state.settings.outputDevice = deviceId;
+  },
   updateSettings(state, { key, value }) {
     state.settings[key] = value;
   },

src/utils/Player.js

@@ -102,6 +102,8 @@ export default class {
 
   _init() {
     Howler.autoUnlock = false;
+    Howler.usingWebAudio = true;
+    Howler.masterGain = true;
     this._loadSelfFromLocalStorage();
     this._replaceCurrentTrack(this._currentTrack.id, false).then(() => {
       this._howler.seek(localStorage.getItem("playerCurrentTrackTime") ?? 0);
@@ -150,11 +152,27 @@ 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: true,
+      html5: false,
       format: ["mp3", "flac"],
     });
     if (autoplay) {

src/views/playlist.vue

@@ -545,28 +545,6 @@ export default {
   }
 }
 
-@media (max-width: 600px) {
-  .playlist-info {
-    width: calc(100vw - 2 * var(--main-content-padding-x));
-    display: block;
-
-    .cover {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .info {
-      margin-top: 24px;
-      margin-left: 0;
-
-      .title {
-        font-size: 48px;
-      }
-    }
-  }
-}
-
 .special-playlist {
   margin-top: 192px;
   margin-bottom: 128px;

src/views/settings.vue

@@ -74,6 +74,18 @@
           </select>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title"> {{ $t("settings.deviceSelector") }} </div>
+        </div>
+        <div class="right">
+          <select v-model="outputDevice">
+            <option v-for="device in allOutputDevices" :key="device.deviceId" :value="device.deviceId" :selected="device.deviceId == outputDevice">
+              {{ device.label }}
+            </option>
+          </select>
+        </div>
+      </div>
       <div class="item">
         <div class="left">
           <div class="title">
@@ -227,6 +239,7 @@ export default {
         size: "0KB",
         length: 0,
       },
+      allOutputDevices: [],
     };
   },
   computed: {
@@ -270,6 +283,19 @@ export default {
         this.clearCache("tracks");
       },
     },
+    outputDevice: {
+      get() {
+        if (this.allOutputDevices.length == 0) this.getAllOutputDevices(); // Ensure devices loaded before get
+        const isValidDevice = this.allOutputDevices.find(device => device.deviceId === this.settings.outputDevice);
+        if (this.settings.outputDevice === undefined || isValidDevice === undefined) return "default"; // Default deviceId
+        return this.settings.outputDevice;
+      },
+      set(deviceId) {
+        if (deviceId === this.settings.outputDevice || deviceId === undefined) return;
+        this.$store.commit("changeOutputDevice", deviceId);
+        document.querySelector("audio").setSinkId(deviceId); // Change output device
+      },
+    },
     showGithubIcon: {
       get() {
         if (this.settings.showGithubIcon === undefined) return true;
@@ -356,6 +382,11 @@ export default {
     },
   },
   methods: {
+    getAllOutputDevices() {
+      return navigator.mediaDevices.enumerateDevices().then(
+        devices => this.allOutputDevices = devices.filter(device => device.kind == "audiooutput")
+      );
+    },
     logout() {
       doLogout();
       this.$router.push({ name: "home" });