bdim/Canto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Replace react-h5-audio-player with @arraypress/waveform-player and update AudioPlayer component to support waveform visualization

Browse Source
This commit is contained in:
bdim404
2026-02-06 18:50:06 +08:00
parent 26e40039a9
commit 8f5cfd8093
10 changed files with 149 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
qwen3-tts-frontend/src/components/AudioPlayer.module.css
View File

@@ -8,92 +8,58 @@
background: transparent;
}
.audioPlayerWrapper :global(.rhap_container) {
.waveformContainer {
flex: 1;
background-color: transparent;
box-shadow: none;
min-width: 0;
}
.audioPlayerWrapper :global(.waveform-player) {
background: transparent;
border: none;
padding: 0;
}
.audioPlayerWrapper :global(.rhap_main) {
--rhap_theme-color: hsl(var(--primary));
--rhap_background-color: transparent;
--rhap_bar-color: hsl(var(--secondary));
--rhap_time-color: hsl(var(--muted-foreground));
.audioPlayerWrapper :global(.waveform-btn) {
color: hsl(var(--foreground));
border-color: hsl(var(--border));
background: transparent;
transition: all 150ms ease;
}
.audioPlayerWrapper :global(.rhap_progress-indicator),
.audioPlayerWrapper :global(.rhap_volume-indicator) {
background: hsl(var(--primary));
.audioPlayerWrapper :global(.waveform-btn:hover) {
color: hsl(var(--primary));
border-color: hsl(var(--primary));
}
.audioPlayerWrapper :global(.rhap_progress-filled),
.audioPlayerWrapper :global(.rhap_volume-bar) {
background-color: hsl(var(--primary));
}
.audioPlayerWrapper :global(.rhap_progress-bar),
.audioPlayerWrapper :global(.rhap_volume-container) {
background-color: hsl(var(--secondary));
}
.audioPlayerWrapper :global(.rhap_progress-bar) {
height: 6px;
border-radius: 3px;
transition: height 0.15s ease;
}
.audioPlayerWrapper :global(.rhap_progress-bar):hover {
height: 7px;
}
.audioPlayerWrapper :global(.rhap_progress-filled) {
.audioPlayerWrapper :global(.waveform-canvas) {
border-radius: 3px;
}
.audioPlayerWrapper :global(.rhap_progress-indicator) {
width: 14px;
height: 14px;
top: -4px;
margin-left: -7px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
.audioPlayerWrapper :global(.waveform-info) {
position: relative;
justify-content: center;
}
.audioPlayerWrapper :global(.rhap_progress-indicator):hover {
transform: scale(1.1);
.audioPlayerWrapper :global(.waveform-text) {
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audioPlayerWrapper :global(.rhap_progress-container) {
margin: 0 0.5rem;
.audioPlayerWrapper :global(.waveform-title) {
text-align: center;
font-size: 0.8125rem;
}
.audioPlayerWrapper :global(.rhap_horizontal .rhap_controls-section) {
margin-left: 0;
}
.audioPlayerWrapper :global(.rhap_time) {
.audioPlayerWrapper :global(.waveform-time) {
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
font-weight: 500;
}
.audioPlayerWrapper :global(.rhap_button-clear) {
color: hsl(var(--foreground));
font-size: 1.25rem;
}
.audioPlayerWrapper :global(.rhap_button-clear):hover {
color: hsl(var(--primary));
}
.audioPlayerWrapper :global(.rhap_main-controls-button) {
width: 40px;
height: 40px;
}
.audioPlayerWrapper :global(.rhap_main-controls-button svg) {
width: 22px;
height: 22px;
position: absolute;
right: 0;
}
.downloadButton {