azure/vue-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

保存

Browse Source
This commit is contained in:
Azure
2025-09-24 16:43:10 +08:00
parent 12f46e6f8e
commit 9dbc054483
130 changed files with 16474 additions and 4660 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
public/apps/music-player/index.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐播放器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="music-player">
<!-- 头部标题栏 -->
<header class="player-header">
<h1>🎵 音乐播放器</h1>
<div class="header-controls">
<button id="minimizeBtn" class="control-btn">➖</button>
<button id="maximizeBtn" class="control-btn">🔲</button>
<button id="closeBtn" class="control-btn">❌</button>
</div>
</header>
<!-- 主要播放区域 -->
<main class="player-main">
<!-- 当前播放信息 -->
<section class="current-track">
<div class="track-art">
<img id="trackImage" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjRkY2NzMxIi8+CjxwYXRoIGQ9Ik0zNSA3NVYyNUw2NSA1MEwzNSA3NVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPg==" alt="音乐封面">
</div>
<div class="track-info">
<h2 id="trackTitle">选择音乐文件开始播放</h2>
<p id="trackArtist">未知艺术家</p>
<p id="trackAlbum">未知专辑</p>
</div>
</section>
<!-- 进度控制 -->
<section class="progress-section">
<div class="time-display">
<span id="currentTime">00:00</span>
<input type="range" id="progressBar" min="0" max="100" value="0" class="progress-bar">
<span id="totalTime">00:00</span>
</div>
</section>
<!-- 播放控制 -->
<section class="controls">
<button id="shuffleBtn" class="control-btn secondary">🔀</button>
<button id="prevBtn" class="control-btn">⏮️</button>
<button id="playPauseBtn" class="control-btn primary">▶️</button>
<button id="nextBtn" class="control-btn">⏭️</button>
<button id="repeatBtn" class="control-btn secondary">🔁</button>
</section>
<!-- 音量控制 -->
<section class="volume-section">
<span class="volume-icon">🔊</span>
<input type="range" id="volumeBar" min="0" max="100" value="70" class="volume-bar">
<span id="volumeValue">70%</span>
</section>
</main>
<!-- 播放列表 -->
<aside class="playlist-section">
<div class="playlist-header">
<h3>播放列表</h3>
<div class="playlist-controls">
<input type="file" id="fileInput" accept="audio/*" multiple style="display: none;">
<button id="addFilesBtn" class="btn-secondary">添加文件</button>
<button id="clearPlaylistBtn" class="btn-secondary">清空列表</button>
</div>
</div>
<ul id="playlist" class="playlist">
<li class="playlist-empty">暂无音乐文件</li>
</ul>
</aside>
<!-- 状态栏 -->
<footer class="status-bar">
<span id="statusText">就绪</span>
<span id="trackCount">0 首歌曲</span>
</footer>
</div>
<!-- 隐藏的音频元素 -->
<audio id="audioPlayer" preload="none"></audio>
<script src="app.js"></script>
</body>
</html>