88 lines
3.7 KiB
HTML
88 lines
3.7 KiB
HTML
<!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> |