mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-03 14:20:50 +08:00
@@ -123,7 +123,7 @@
|
|||||||
<template #trigger>
|
<template #trigger>
|
||||||
<i
|
<i
|
||||||
class="iconfont ri-netease-cloud-music-line"
|
class="iconfont ri-netease-cloud-music-line"
|
||||||
:class="{ 'text-green-500': isLyricWindowOpen, 'disabled-icon': !(playMusic?.id) }"
|
:class="{ 'text-green-500': isLyricWindowOpen, 'disabled-icon': !playMusic?.id }"
|
||||||
@click="playMusic?.id && openLyricWindow()"
|
@click="playMusic?.id && openLyricWindow()"
|
||||||
></i>
|
></i>
|
||||||
</template>
|
</template>
|
||||||
@@ -245,27 +245,22 @@ const formatTooltip = (value: number) => {
|
|||||||
return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
|
return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 音量条
|
// 音量条 - 使用 playerStore 的统一音量管理
|
||||||
const audioVolume = ref(
|
|
||||||
localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
|
|
||||||
);
|
|
||||||
const getVolumeIcon = computed(() => {
|
const getVolumeIcon = computed(() => {
|
||||||
// 0 静音 ri-volume-mute-line 0.5 ri-volume-down-line 1 ri-volume-up-line
|
// 0 静音 ri-volume-mute-line 0.5 ri-volume-down-line 1 ri-volume-up-line
|
||||||
if (audioVolume.value === 0) {
|
if (playerStore.volume === 0) {
|
||||||
return 'ri-volume-mute-line';
|
return 'ri-volume-mute-line';
|
||||||
}
|
}
|
||||||
if (audioVolume.value <= 0.5) {
|
if (playerStore.volume <= 0.5) {
|
||||||
return 'ri-volume-down-line';
|
return 'ri-volume-down-line';
|
||||||
}
|
}
|
||||||
return 'ri-volume-up-line';
|
return 'ri-volume-up-line';
|
||||||
});
|
});
|
||||||
|
|
||||||
const volumeSlider = computed({
|
const volumeSlider = computed({
|
||||||
get: () => audioVolume.value * 100,
|
get: () => playerStore.volume * 100,
|
||||||
set: (value) => {
|
set: (value) => {
|
||||||
localStorage.setItem('volume', (value / 100).toString());
|
playerStore.setVolume(value / 100);
|
||||||
audioService.setVolume(value / 100);
|
|
||||||
audioVolume.value = value / 100;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -411,6 +411,9 @@ export const usePlayerStore = defineStore('player', () => {
|
|||||||
// 播放速度状态
|
// 播放速度状态
|
||||||
const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
|
const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
|
||||||
|
|
||||||
|
// 音量状态管理
|
||||||
|
const volume = ref(parseFloat(getLocalStorageItem('volume', '1')));
|
||||||
|
|
||||||
// 清空播放列表
|
// 清空播放列表
|
||||||
const clearPlayAll = async () => {
|
const clearPlayAll = async () => {
|
||||||
audioService.pause();
|
audioService.pause();
|
||||||
@@ -1439,6 +1442,35 @@ export const usePlayerStore = defineStore('player', () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 音量管理方法
|
||||||
|
const setVolume = (newVolume: number) => {
|
||||||
|
// 确保音量值在0-1范围内
|
||||||
|
const normalizedVolume = Math.max(0, Math.min(1, newVolume));
|
||||||
|
volume.value = normalizedVolume;
|
||||||
|
|
||||||
|
// 保存到localStorage
|
||||||
|
localStorage.setItem('volume', normalizedVolume.toString());
|
||||||
|
|
||||||
|
// 应用到音频服务
|
||||||
|
audioService.setVolume(normalizedVolume);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getVolume = () => {
|
||||||
|
return volume.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const increaseVolume = (step: number = 0.1) => {
|
||||||
|
const newVolume = Math.min(1, volume.value + step);
|
||||||
|
setVolume(newVolume);
|
||||||
|
return newVolume;
|
||||||
|
};
|
||||||
|
|
||||||
|
const decreaseVolume = (step: number = 0.1) => {
|
||||||
|
const newVolume = Math.max(0, volume.value - step);
|
||||||
|
setVolume(newVolume);
|
||||||
|
return newVolume;
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
play,
|
play,
|
||||||
isPlay,
|
isPlay,
|
||||||
@@ -1491,6 +1523,13 @@ export const usePlayerStore = defineStore('player', () => {
|
|||||||
setPlayListDrawerVisible,
|
setPlayListDrawerVisible,
|
||||||
handlePause,
|
handlePause,
|
||||||
playbackRate,
|
playbackRate,
|
||||||
setPlaybackRate
|
setPlaybackRate,
|
||||||
|
|
||||||
|
// 音量管理
|
||||||
|
volume,
|
||||||
|
setVolume,
|
||||||
|
getVolume,
|
||||||
|
increaseVolume,
|
||||||
|
decreaseVolume
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -96,11 +96,8 @@ export async function handleShortcutAction(action: string) {
|
|||||||
showToast(t('player.playBar.next'), 'ri-skip-forward-line');
|
showToast(t('player.playBar.next'), 'ri-skip-forward-line');
|
||||||
break;
|
break;
|
||||||
case 'volumeUp':
|
case 'volumeUp':
|
||||||
// 从localStorage获取当前音量
|
if (playerStore.getVolume() < 1) {
|
||||||
const currentVolumeUp = parseFloat(localStorage.getItem('volume') || '1');
|
const newVolume = playerStore.increaseVolume(0.1);
|
||||||
if (currentVolumeUp < 1) {
|
|
||||||
const newVolume = Math.min(1, currentVolumeUp + 0.1);
|
|
||||||
await audioService.setVolume(newVolume);
|
|
||||||
showToast(
|
showToast(
|
||||||
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
|
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
|
||||||
'ri-volume-up-line'
|
'ri-volume-up-line'
|
||||||
@@ -108,11 +105,8 @@ export async function handleShortcutAction(action: string) {
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'volumeDown':
|
case 'volumeDown':
|
||||||
// 从localStorage获取当前音量
|
if (playerStore.getVolume() > 0) {
|
||||||
const currentVolumeDown = parseFloat(localStorage.getItem('volume') || '1');
|
const newVolume = playerStore.decreaseVolume(0.1);
|
||||||
if (currentVolumeDown > 0) {
|
|
||||||
const newVolume = Math.max(0, currentVolumeDown - 0.1);
|
|
||||||
await audioService.setVolume(newVolume);
|
|
||||||
showToast(
|
showToast(
|
||||||
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
|
`${t('player.playBar.volume')}${Math.round(newVolume * 100)}%`,
|
||||||
'ri-volume-down-line'
|
'ri-volume-down-line'
|
||||||
|
|||||||
Reference in New Issue
Block a user