lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 播放器

Browse Source
This commit is contained in:
李琦
2026-08-01 18:07:09 +08:00
parent d824b9945e
commit 33027cf61e
1 changed files with 191 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
vite-tailwindcss/src/views/index/index.vue
View File

@@ -173,16 +173,21 @@
</button>
<div class="player-panel-sliders">
<div class="player-vol-row">
<i class="fa-solid fa-volume-low" />
<input
type="range"
class="player-range player-vol"
min="0"
max="1"
step="0.01"
:value="audio.volume.value"
@input="onVolumeInput"
/>
<button type="button" class="player-vol-icon" title="音量" @click="toggleMute">
<i :class="volumeIconClass" />
</button>
<div class="player-vol-track">
<input
type="range"
class="player-vol-range"
min="0"
max="1"
step="0.01"
:value="audio.volume.value"
:style="{ '--vol': `${Math.round((audio.volume.value || 0) * 100)}%` }"
@input="onVolumeInput"
/>
</div>
</div>
<div class="player-seek-wrap">
<input
@@ -192,6 +197,7 @@
:max="seekMax"
step="0.1"
:value="audio.currentTime.value"
:style="{ '--seek': seekPercent }"
@input="onSeekInput"
/>
<div class="player-time">
@@ -605,6 +611,26 @@ const lrcListRef = ref(null)
const danmakuLayerRef = ref(null)
const seekMax = computed(() => Math.max(audio.duration.value || 0, audio.currentTime.value || 0, 1))
const seekPercent = computed(() => {
const d = audio.duration.value || 0
if (!d) return '0%'
return `${Math.min(100, Math.max(0, (audio.currentTime.value / d) * 100))}%`
})
const volumeIconClass = computed(() => {
const v = audio.volume.value || 0
if (v <= 0.001) return 'fa-solid fa-volume-xmark'
if (v < 0.45) return 'fa-solid fa-volume-low'
return 'fa-solid fa-volume-high'
})
let lastVolumeBeforeMute = 0.5
const toggleMute = () => {
if ((audio.volume.value || 0) > 0.001) {
lastVolumeBeforeMute = audio.volume.value
audio.setVolume(0)
} else {
audio.setVolume(lastVolumeBeforeMute || 0.5)
}
}
const activeLrcIndex = computed(() => findLrcIndex(lrcLines.value, audio.currentTime.value))
const loadLrcForActive = async () => {
@@ -835,7 +861,7 @@ const clearBottomReturn = () => {
}
const scheduleBottomReturn = (reset = false) => {
if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value || showBlessingDrawer.value || showPlayerPanel.value) return
if (!isAtBottom() || !isAutoScroll.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value || showBlessingDrawer.value) return
if (bottomReturnTimer && !reset) return
clearBottomReturn()
bottomReturnTimer = setTimeout(() => {
@@ -879,7 +905,6 @@ const canAutoAdvance = () =>
&& !isInteracting.value
&& !isDrawerOpen.value
&& !showBlessingDrawer.value
&& !showPlayerPanel.value
&& !previewVisible.value
&& !showMapOptions.value
&& !showOpenInBrowser.value
@@ -1215,9 +1240,9 @@ watch(
)
watch(freeScrollSignature, restartAutoScroll)
watch(
() => [isDrawerOpen.value, showBlessingDrawer.value, showPlayerPanel.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value],
() => [isDrawerOpen.value, showBlessingDrawer.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value],
() => {
if (isDrawerOpen.value || showBlessingDrawer.value || showPlayerPanel.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) {
if (isDrawerOpen.value || showBlessingDrawer.value || previewVisible.value || showMapOptions.value || showOpenInBrowser.value) {
cancelAnimationFrame(animId)
clearBottomReturn()
}
@@ -1445,9 +1470,24 @@ watch(
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
margin-bottom: 10px;
padding: 0 2px;
}
.player-panel-meta {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.player-panel-cover {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 12px;
background: #c4a484 center/cover no-repeat;
box-shadow: 0 3px 10px rgba(92, 74, 53, 0.18);
}
.player-panel-title {
font-size: 14px;
color: #5c4a35;
@@ -1467,79 +1507,10 @@ watch(
display: inline-flex;
align-items: center;
justify-content: center;
}
.player-panel-controls {
display: flex;
align-items: center;
gap: 12px;
}
.player-play-btn {
width: 42px;
height: 42px;
border-radius: 999px;
background: linear-gradient(145deg, #c4a484, #a88c6b);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35);
font-size: 14px;
}
.player-play-btn .fa-play { margin-left: 2px; }
.player-seek-wrap { flex: 1; min-width: 0; }
.player-time {
display: flex;
justify-content: space-between;
font-size: 10px;
color: #9a9084;
margin-top: 4px;
padding: 0 2px;
}
.player-vol-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(168, 140, 107, 0.08);
color: #a88c6b;
font-size: 12px;
}
.player-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(168, 140, 107, 0.22);
outline: none;
}
.player-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 999px;
background: #fff;
border: 2px solid #a88c6b;
box-shadow: 0 2px 6px rgba(92, 74, 53, 0.2);
cursor: pointer;
}
.player-range::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 999px;
background: #fff;
border: 2px solid #a88c6b;
box-shadow: 0 2px 6px rgba(92, 74, 53, 0.2);
cursor: pointer;
}
.player-vol { flex: 1; }
.player-lrc-list {
margin-top: 12px;
max-height: 148px;
max-height: 132px;
overflow-y: auto;
padding: 10px 8px;
border-radius: 18px;
@@ -1569,6 +1540,141 @@ watch(
font-size: 12px;
color: #9a9084;
}
.player-panel-footer {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
}
.player-play-btn {
width: 46px;
height: 46px;
border-radius: 999px;
background: linear-gradient(145deg, #c4a484, #a88c6b);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-shadow: 0 6px 14px rgba(168, 140, 107, 0.35);
font-size: 15px;
}
.player-play-btn .fa-play { margin-left: 2px; }
.player-panel-sliders {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.player-vol-row {
display: flex;
align-items: center;
gap: 6px;
color: #a88c6b;
}
.player-vol-icon {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #a88c6b;
font-size: 12px;
flex: 0 0 auto;
background: transparent;
}
.player-vol-track {
flex: 1;
min-width: 0;
height: 28px;
display: flex;
align-items: center;
}
.player-vol-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
outline: none;
background: linear-gradient(
90deg,
#c4a484 0%,
#a88c6b var(--vol, 50%),
rgba(168, 140, 107, 0.18) var(--vol, 50%),
rgba(168, 140, 107, 0.18) 100%
);
cursor: pointer;
}
.player-vol-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 999px;
background: #fff;
border: none;
box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
cursor: pointer;
transition: transform 0.15s ease;
}
.player-vol-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.player-vol-range::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 999px;
background: #fff;
border: none;
box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
cursor: pointer;
}
.player-seek-wrap { width: 100%; }
.player-time {
display: flex;
justify-content: space-between;
font-size: 10px;
color: #9a9084;
margin-top: 3px;
padding: 0 2px;
}
.player-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 999px;
outline: none;
background: linear-gradient(
90deg,
#c4a484 0%,
#a88c6b var(--seek, 0%),
rgba(168, 140, 107, 0.18) var(--seek, 0%),
rgba(168, 140, 107, 0.18) 100%
);
cursor: pointer;
}
.player-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 999px;
background: #fff;
border: none;
box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
cursor: pointer;
}
.player-range::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 999px;
background: #fff;
border: none;
box-shadow: 0 1px 4px rgba(92, 74, 53, 0.28), 0 0 0 1px rgba(168, 140, 107, 0.35);
cursor: pointer;
}
@keyframes vinyl-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
@@ -2353,4 +2459,3 @@ watch(
100% { opacity: 0; transform: translateY(-12px) scale(.94); filter: blur(1.4px); }
}
</style>