A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 新增音频播放器功能及MV预览组件

Browse Source 
style: 优化页面布局及样式细节

refactor: 重构音频播放逻辑与进度条控制

docs: 更新README说明音频播放功能

test: 添加音频播放器交互测试用例
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-10 19:00:23 +08:00
parent 8a6bef2214
commit 3d380d82de
37 changed files with 1629 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
1.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>红色进度条音频播放器</title>
<style>
/* 基础样式：控制播放器宽度和高度 */
audio {
width: 300px;
height: 30px;
}
/* Chrome/Safari 样式 */
/* 隐藏所有控制按钮 */
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-volume-slider-container,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-playback-rate-button {
display: none !important;
}
/* 进度条设置 */
audio::-webkit-media-controls-timeline {
display: block !important;
width: 100% !important;
height: 6px !important;
}
/* 进度条背景 */
audio::-webkit-media-controls-timeline-container {
background-color: #eee !important;
border-radius: 3px !important;
}
/* 红色进度条和滑块 */
audio::-webkit-media-controls-thumb-container {
color: #ff0000 !important;
}
audio::-webkit-media-controls-timeline-progress-bar {
background-color: #ff0000 !important;
border-radius: 3px !important;
}
/* Firefox 样式 */
/* 隐藏所有控制按钮 */
audio::-moz-media-controls-play-button,
audio::-moz-media-controls-volume-control,
audio::-moz-media-controls-playback-rate,
audio::-moz-media-controls-current-time-display,
audio::-moz-media-controls-time-remaining-display {
display: none !important;
}
/* 控制面板样式 */
audio::-moz-media-controls-panel {
height: 30px !important;
background-color: transparent !important;
padding: 0 !important;
}
/* 进度条背景 */
audio::-moz-media-controls-timeline {
background-color: #eee !important;
border-radius: 3px !important;
height: 6px !important;
}
/* 红色进度条和滑块 */
audio::-moz-media-controls-progress-bar {
background-color: #ff0000 !important;
border-radius: 3px !important;
}
audio::-moz-media-controls-thumb {
background-color: #ff0000 !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
}
</style>
</head>
<body>
<audio controls loop>
<source src="audio1.mp3" type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
<script>
const audio = document.querySelector('audio');
audio.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(err => {
alert('请先点击页面，再点击进度条播放');
});
} else {
audio.pause();
}
});
</script>
</body>
</html>