admin/meijiaka-zy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 音频素材库播放按钮支持播放/暂停状态切换

Browse Source
This commit is contained in:
小鱼开发
2026-04-22 08:00:30 +08:00
parent 500bab273c
commit 183e2a3399
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tauri-app/src/pages/ContentManagement/VoiceMaterialLibrary.tsx
+29 -7
View File
@@ -38,6 +38,10 @@ export default function VoiceMaterialLibrary() {
const fileInputRef = useRef<HTMLInputElement>(null);
const pollingIds = useRef<Set<string>>(new Set());
// 音频播放状态
const [playingId, setPlayingId] = useState<string | null>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
const {
voiceMaterials,
avatarMaterials,
@@ -504,20 +508,38 @@ export default function VoiceMaterialLibrary() {
width: 36,
height: 36,
borderRadius: '50%',
background: 'var(--bg-secondary)',
background: playingId === m.id ? 'var(--primary-color)' : 'var(--bg-secondary)',
color: playingId === m.id ? '#fff' : 'inherit',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
onClick={() => {
const audio = new Audio(m.sourceUrl);
audio.play();
if (playingId === m.id) {
audioRef.current?.pause();
setPlayingId(null);
} else {
audioRef.current?.pause();
const audio = new Audio(m.sourceUrl);
audio.onended = () => setPlayingId(null);
audio.onpause = () => setPlayingId(null);
audio.play();
audioRef.current = audio;
setPlayingId(m.id);
}
}}
title="播放"
title={playingId === m.id ? '暂停' : '播放'}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
{playingId === m.id ? (
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<rect x="6" y="4" width="4" height="16" rx="1" />
<rect x="14" y="4" width="4" height="16" rx="1" />
</svg>
) : (
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
)}
</button>
)}
<button