77 lines
3.0 KiB
HTML
77 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>音乐播放器 - 波形图可视化</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="audio-player">
|
|
<h1>音乐播放器</h1>
|
|
|
|
<!-- 文件选择 -->
|
|
<div class="file-selector">
|
|
<input type="file" id="audioFile" accept="audio/*" />
|
|
<label for="audioFile" class="file-label">选择音乐文件</label>
|
|
<input type="file" id="audioFolder" webkitdirectory directory multiple accept="audio/*" style="display: none;" />
|
|
<label for="audioFolder" class="file-label folder-label">选择音乐文件夹</label>
|
|
</div>
|
|
|
|
<!-- 当前播放信息 -->
|
|
<div class="track-info">
|
|
<p id="trackName">请选择音乐文件</p>
|
|
</div>
|
|
|
|
<!-- 波形图显示 -->
|
|
<div class="waveform-container">
|
|
<canvas id="waveform" width="800" height="300"></canvas>
|
|
</div>
|
|
|
|
<!-- 音频元素（隐藏，只用于音频播放） -->
|
|
<audio id="audio" style="display: none;"></audio>
|
|
|
|
<!-- 播放控制和进度条 -->
|
|
<div class="playback-progress-container">
|
|
<button id="prevBtn" class="control-btn nav-btn" title="上一首 (P)">⏮️</button>
|
|
<button id="playPauseBtn" class="control-btn play-pause-btn">▶️</button>
|
|
<button id="nextBtn" class="control-btn nav-btn" title="下一首 (N)">⏭️</button>
|
|
<div class="progress-container">
|
|
<div class="progress-bar" id="progressBar">
|
|
<div id="progress" class="progress"></div>
|
|
<div class="progress-handle" id="progressHandle"></div>
|
|
</div>
|
|
<div class="time-display">
|
|
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
|
|
</div>
|
|
</div>
|
|
<button id="stopBtn" class="control-btn stop-btn">⏹️</button>
|
|
</div>
|
|
|
|
<!-- 底部控制栏 -->
|
|
<div class="bottom-controls">
|
|
<!-- 播放模式控制 -->
|
|
<div class="playback-mode-control">
|
|
<button id="playbackModeBtn" class="control-btn" title="切换播放模式">🔁</button>
|
|
<span id="playbackModeText">列表循环</span>
|
|
</div>
|
|
|
|
<!-- 可视化控制 -->
|
|
<div class="visualization-control">
|
|
<button id="visualizationBtn" class="control-btn">🎨 切换可视化</button>
|
|
<span id="visualizationMode">条形图</span>
|
|
</div>
|
|
|
|
<!-- 音量控制 -->
|
|
<div class="volume-control">
|
|
<button id="muteBtn" class="control-btn volume-btn">🔊</button>
|
|
<input type="range" id="volumeSlider" min="0" max="100" value="50" />
|
|
<span id="volumeValue">50%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html> |