add output device switching

This commit is contained in:
Vidocq 2021-02-24 03:14:29 +08:00
parent 970124f70d
commit 5223089dc7
3 changed files with 46 additions and 16 deletions

View File

@ -156,11 +156,11 @@ export default class {
Howler.masterGain.disconnect();
const mediaStreamNode = Howler.ctx.createMediaStreamDestination();
Howler.masterGain.connect(mediaStreamNode);
let audio = '';
if (document.querySelector('audio') !== null) {
audio = document.querySelector('audio');
let audio = "";
if (document.querySelector("audio") !== null) {
audio = document.querySelector("audio");
} else {
audio = document.createElement('audio');
audio = document.createElement("audio");
document.body.append(audio);
}
audio.autoplay = true;

View File

@ -345,10 +345,19 @@ export default {
);
},
filteredTracks() {
return this.tracks.filter(song =>
song.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()) ||
song.al.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()) ||
song.ar.find(artist => artist.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()))
return this.tracks.filter(
(song) =>
song.name
.toLowerCase()
.includes(this.playlistKeyword.toLowerCase()) ||
song.al.name
.toLowerCase()
.includes(this.playlistKeyword.toLowerCase()) ||
song.ar.find((artist) =>
artist.name
.toLowerCase()
.includes(this.playlistKeyword.toLowerCase())
)
);
},
},
@ -397,7 +406,11 @@ export default {
this.lastLoadedTrackIndex = data.playlist.tracks.length - 1;
if (this.playlist.trackCount > this.tracks.length) {
window.addEventListener("scroll", this.handleScroll, true);
window.addEventListener("input", this.handleSearch, this.playlistKeyword);
window.addEventListener(
"input",
this.handleSearch,
this.playlistKeyword
);
}
return data;
})

View File

@ -80,7 +80,12 @@
</div>
<div class="right">
<select v-model="outputDevice">
<option v-for="device in allOutputDevices" :key="device.deviceId" :value="device.deviceId" :selected="device.deviceId == outputDevice">
<option
v-for="device in allOutputDevices"
:key="device.deviceId"
:value="device.deviceId"
:selected="device.deviceId == outputDevice"
>
{{ device.label }}
</option>
</select>
@ -286,12 +291,19 @@ export default {
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
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;
if (deviceId === this.settings.outputDevice || deviceId === undefined)
return;
this.$store.commit("changeOutputDevice", deviceId);
document.querySelector("audio").setSinkId(deviceId); // Change output device
},
@ -383,9 +395,14 @@ export default {
},
methods: {
getAllOutputDevices() {
return navigator.mediaDevices.enumerateDevices().then(
devices => this.allOutputDevices = devices.filter(device => device.kind == "audiooutput")
);
return navigator.mediaDevices
.enumerateDevices()
.then(
(devices) =>
(this.allOutputDevices = devices.filter(
(device) => device.kind == "audiooutput"
))
);
},
logout() {
doLogout();